Библиотеки для работы с изображениями

Алекс8 · 30 сен 2017

В общем помогите мне пожалуйста)) я нифига не фрондэндщик - но стоит такая задача.
Нужно сделать что то типа редактора, что бы загрузив картинку можно было ее кадрировать, выбрать шрифт, нанести надпись, увеличить уменьшить размер шрифта, перетянуть надпись куда то....
насколько я понимаю что это все делается с помощью canvas... но знаний пока мало в этой области.
Так что подскажите - помогите)
Спасибо.

Deonis · 30 сен 2017

@Алекс8, с перечисленным функционалом, вы вряд ли найдете бесплатный плагин. А так, есть неплохой Pixie Image Editor

Fell-x27 · 30 сен 2017

Подсказать что конкретно?

Алекс8 · 30 сен 2017

Fell-x27 сказал(а): ↑

Подсказать что конкретно?
Нажмите, чтобы раскрыть...

может есть какие то opensource проекты.. может кто то что то подобное видел на гитхабе..
или может гдето примеры есть как это реализовывается..
я особо не сильно понимаю даже с чего начинать если самому это делать..

Fell-x27 · 30 сен 2017

https://habrahabr.ru/post/111308/

Алекс8 · 30 сен 2017

@Fell-x27 да)) я тоже читаю сижу с самого начала)

mahmuzar · 30 сен 2017

Как то и мне приходилось, для своего велосипеда делать что-то подобное, использовал canvas)
--- Добавлено ---

Код (Javascript):

var intup_field = document.getElementById('add_file');

console.log(intup_field);

// from an input element

var filesToUpload = intup_field.files;

// from drag-and-drop

var canvasDiv = document.getElementById('can');

canvasDiv.style.width = "100%";

var MAX_WIDTH = 900;

var MAX_HEIGHT = 900;

var angles = [0 * Math.PI, 0.5 * Math.PI, Math.PI, 1.5 * Math.PI],

index = 0;

var width;

var height;

intup_field.ondrag = intup_field.onchange = function () {

console.log(intup_field.files);

for (var i = 0; i < intup_field.files.length; i++) {

var file = intup_field.files[i];

var img = document.createElement("img");

img.src = window.URL.createObjectURL(file);

//console.log(i);

img.onload = function () {

//console.log(img);

var panel_group = document.createElement('div');

panel_group.className = 'panel-group';

var panel = document.createElement('div');

var panel_heading = document.createElement('div');

panel_heading.className = 'panel-heading';

panel.className = 'panel panel-default';

var panel_body = document.createElement('div');

panel_body.className = 'panel-body';

panel.appendChild(panel_heading);

panel.appendChild(panel_body);

panel_group.appendChild(panel);

var canvas = document.createElement('canvas');

var ctx = canvas.getContext("2d");

var buttonsLeft = document.createElement('div');

var buttonsRight = document.createElement('div');

var right = document.createElement('button');

right.type = 'button';

right.className = 'btn btn-default';

var sp = document.createElement('span');

sp.className = 'glyphicon glyphicon-chevron-right';

right.appendChild(sp);

right.onclick = function () {

setSize(img);

index++; /// decrement index of array

if (index >= angles.length)

index = 0;

//alert(index);

resizeConv(canvas);

var angle = angles[index],

cw = canvas.width * 0.5,

ch = canvas.height * 0.5;

ctx.translate(cw, ch);

ctx.rotate(angle);

ctx.translate(-width * 0.5, -height * 0.5);

ctx.drawImage(img, 0, 0, width, height);

ctx.setTransform(1, 0, 0, 1, 0, 0);

//console.log(ctx);

return false;

};

var left = document.createElement('button');

left.type = 'button';

left.className = 'btn btn-default';

var sp = document.createElement('span');

sp.className = 'glyphicon glyphicon-chevron-left';

left.appendChild(sp);

left.onclick = function () {

setSize(img);

index--; /// decrement index of array

if (index < 0)

index = angles.length - 1;

resizeConv(canvas);

var angle = angles[index],

cw = canvas.width * 0.5,

ch = canvas.height * 0.5;

ctx.translate(cw, ch);

ctx.rotate(angle);

ctx.translate(-width * 0.5, -height * 0.5);

ctx.drawImage(img, 0, 0, width, height);

ctx.setTransform(1, 0, 0, 1, 0, 0);

console.log();

return false;

};

var del = document.createElement('button');

del.type = 'button';

del.className = 'btn btn-default';

var sp = document.createElement('span');

sp.className = 'glyphicon glyphicon-remove ';

del.appendChild(sp);

del.onclick = function () {

canvasDiv.removeChild(panel_group);

};

//left.innerHTML = 'left';

//right.innerHTML = 'right';

buttonsLeft.className = 'btn-group btn-group-sm';

buttonsLeft.appendChild(left);

buttonsLeft.appendChild(right);

buttonsRight.className = 'btn-group btn-group-sm';

buttonsRight.appendChild(del);

panel_body.appendChild(canvas);

panel_heading.appendChild(buttonsLeft);

panel_heading.appendChild(buttonsRight);

canvasDiv.appendChild(panel_group);

setSize(this);

canvas.width = width;

canvas.height = height;

ctx.drawImage(this, 0, 0, width, height);

};

}

};

function setSize(img) {

if (MAX_WIDTH !== 0 || MAX_HEIGHT !== 0) {

width = img.width;

height = img.height;

if (width > height) {

if (width > MAX_WIDTH) {

height *= MAX_WIDTH / width;

width = MAX_WIDTH;

}

} else {

if (height > MAX_HEIGHT) {

width *= MAX_HEIGHT / height;

height = MAX_HEIGHT;

}

}

} else {

width = img.width;

height = img.height;

}

}

function resizeConv(canvas) {

//canvas.height = height;

switch (index) {

case 0:

case 2:

/// for 0 and 180 degrees size = image

canvas.width = width;

canvas.height = height;

break;

case 1:

case 3:

/// for 90 and 270 canvas width = img height etc.

canvas.width = height;

canvas.height = width;

break;

}

}

names.oninput = function () {

console.log(this);

if (this.textLength > 4) {

this.parentElement.classList.remove("has-error");

}

};

add_product_button.onclick = function () {

var canv = document.getElementsByTagName("canvas");

var formData = new FormData();

for (j = 0; j < add_product.length; j++) {

//alert(add_product[j].value);

if (add_product[j].value === '') {

d = add_product[j].parentElement;

d.classList.add("has-error");

} else {

formData.append(add_product[j].name, add_product[j].value);

}

}

for (i = 0; i < canv.length; i++) {

//console.log(canv[i].toDataURL('image/jpeg'));

formData.append("image[]", canv[i].toDataURL('image/jpeg'));

}

var xhr = new XMLHttpRequest();

xhr.open("POST", "http://newstart/?cmd=Test");

xhr.send(formData);

console.log(xhr.responseText);

};

В качестве старта, вероятно чем то поможет, но не более)).
Этот код делает:
1. загружается фото, и отображается на странице. Можно его крутить- вертеть и наконец удалять! Все.

надеюсь чем-то помог.

Алекс8 · 30 сен 2017

о да))) от чего то отталкиваться можно)) спасибо))
плюс почитаю то что выше ребята дали)) можно будет что то сделать..
я вообще фронтом крайне мало занимался..
Спасибо)

mahmuzar · 30 сен 2017

Про мозиллу тоже не забывай, я там тусовался))

Fell-x27 · 30 сен 2017

mahmuzar сказал(а): ↑

intup_field
Нажмите, чтобы раскрыть...

ну input же

mahmuzar · 30 сен 2017

@Fell-x27, емае, у меня часто такое, быстро печатаешь, палец опережает другой. А дальще дело автокомплита, и переменная везде такая какой ее вначале объявил))

Библиотеки для работы с изображениями

Алекс8 Активный пользователь

Deonis Старожил

Fell-x27 Суперстар
Команда форума Модератор

Алекс8 Активный пользователь

Fell-x27 Суперстар
Команда форума Модератор

Алекс8 Активный пользователь

mahmuzar Старожил

Алекс8 Активный пользователь

mahmuzar Старожил

Fell-x27 Суперстар
Команда форума Модератор

mahmuzar Старожил

Быстрый поиск

Библиотеки для работы с изображениями

Алекс8 Активный пользователь

Deonis Старожил

Fell-x27 Суперстар Команда форума Модератор

Алекс8 Активный пользователь

Fell-x27 Суперстар Команда форума Модератор

Алекс8 Активный пользователь

mahmuzar Старожил

Алекс8 Активный пользователь

mahmuzar Старожил

Fell-x27 Суперстар Команда форума Модератор

mahmuzar Старожил

Fell-x27 Суперстар
Команда форума Модератор

Fell-x27 Суперстар
Команда форума Модератор

Fell-x27 Суперстар
Команда форума Модератор