我有一个Drupal-7网站，我创建了一个模块，您可以在其中上传图像并在提交之前预览图像。
<img id="blah" src="sites/all/themes/my_theme/logo.png" alt="default image" />
然后，我有一些按钮，它们调用JavaScript函数onclick并动态更改上传图像的边界。
现在，我想要的是，当用户上传图像时，他提交表单，我上传他的图像，并使用他选择的边框
我怎样才能做到这一点
提交按钮和图像上传是通过我的.module文件
这是一种非常常见的算法，在互联网上有很多例子，支持的浏览器是10ie和所有现代浏览器。
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
您必须在服务器端处理图像（添加边框）。当用户提交表单时，他会向服务器端发送关于他选择的边界的信息。使用这些信息，您必须更改ImageMajick等上传的图像。
由于您有一个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，则重命名并将图像保存为upload___00fc00.png
现在，您只需要一个javascript函数来从图像的新名称中获取边框颜色，创建边框并将其应用于图像。
function applyBorder(imageName) {
//// get color from image name
//// apply border to image
}