javascript - JavaScript更改后上传图片

Question

我有一个 Drupal-7 网站，我创建了一个模块，您可以在其中上传图像并在提交之前预览图像。

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

然后，我有一些按钮，它们调用 JavaScript 函数 onclick 并动态更改上传图像的边框。

现在，我想要的是，当用户上传图片时，他提交表单，然后我上传他的图片他选择的边框。
我怎样才能做到这一点？
提交按钮和图片上传是通过我的 .module 文件中的 php 表单调用的

Answer 1

很常用的算法，网上有很多例子，支持的浏览器有10个ie和所有现代浏览器。

 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