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
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