JavaScript更改后上传图片

Question

I have a Drupal-7 website, and I have created a module, where you upload an image and preview the image before submitting it.

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

Then, I have some buttons, that call a JavaScript function onclick and dynamically change the border of the uploaded image.

Now, what I want, is that when the user uploads the image, then he submits the form and I upload his image with the border he chose.
How can I achieve that?
The submit button and the image upload are called via a php form at my .module file

Answer 1

It is very common algorithm, with many examples in internet, suppoerted browsers are 10 ie and all modern browsers.

 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

You have to process image (add border) on server side. When user submit form, he send to server side info about which border he have chosen. And using this info you have to change uploaded image by ImageMajick or etc.

Answer 3

Since you have a JavaScript function that onclick will dynamically change the border of the uploaded image

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

Pass the hexadecimal color value or color name "green,blue" etc. In a hidden input.

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

Bind the image name and the color value, server side, to rename the image accordingly.

So if the uploaded image is upload.png and the color value is #00fc00 rename and save the image as upload___00fc00.png

Now all you need is a javascript function to get the border color from the new name of the image, create the border and apply it to the image.

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