Загрузить изображение после изменения JavaScript

Question

У меня есть сайт Drupal-7, и я создал модуль, в котором вы загружаете изображение и просматриваете изображение перед его отправкой.

<img id="blah" src="sites/all/themes/my_theme/logo.png" alt="default image" /> 

Затем, у меня есть некоторые кнопки, которые вызывают функции JavaScript OnClick и динамически изменять границы загруженного изображения.

Теперь, что я хочу, это то, что когда пользователь загружает изображение, он отправляет форму, и я загружаю его изображение с той границей, которую он выбрал.
Как я могу это достичь?
Кнопка отправки и загрузка изображения вызывается через php-форму в моем файле .module

Answer 1

Это очень общий алгоритм, с большим количеством примеров в Интернете, suppoerted браузеры 10 т и все современные браузеры.

1. Convert user selected file to image (img.src = URL.createObjectURL(userSelectedFile)) 
2. Load image to html5 canvas (canvas.getContext("2d").drawImage(image,0,0,width, height)) 
3. Draw Border on html5 canvas (canvas.getContext("2d").drawRectangle(0,0, width, height)) 
4. Convert canvas to blob (canvas.toBlob(function(blob){/** use new blob **/})) 
5. Upload this blob to server by xhr or xhr + FormData 

Answer 2

Вам необходимо обработать изображение (добавить границу) на стороне сервера. Когда пользователь отправляет форму, он отправляет на серверную информацию информацию о том, какую границу он выбрал. И, используя эту информацию, вы должны изменить загруженное изображение на ImageMajick или т.п.

Answer 3

Поскольку у вас есть функция JavaScript, которая OnClick будет динамически изменять границы загруженного изображения

function borderColor() { 
var color; 
// change border color 
$("#borderColorPickID").val(color); // pass color to form 
} 

Передайте значение шестнадцатеричного цвета или цвет имя «зеленый, синий» и т. д. В скрытом входе.

<img id="blah" src="sites/all/themes/my_theme/logo.png" alt="default image" /> 
<input type="hidden" value="" name="borderColorPick" id="borderColorPickID" /> 

Связать имя изображения и значение цвета на стороне сервера, чтобы переименовать изображение соответствующим образом.

Таким образом, если загружено изображение upload.png и значение цвета # 00fc00 переименовать и сохранить изображение в загрузки ___ 00fc00.png

Теперь все, что вам нужно, это Java-функция, чтобы получить цвет границы с нового имени изображения, создайте границу и примените ее к изображению.

function applyBorder(imageName) { 
//// get color from image name 
//// apply border to image 
}