在 JavaScript 次更改后上传图片

Question

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

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

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

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

中的 php 表单调用的

Answer 1

您必须在服务器端处理图像（添加边框）。当用户提交表单时，他向服务器端发送有关他选择的边框的信息。使用此信息，您必须通过 ImageMajick 或其他方式更改上传的图像。

Answer 2

因为你有一个 JavaScript 函数，onclick 会动态改变上传图片的边框

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

在隐藏输入中传递十六进制颜色值或颜色名称"green,blue"等。

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

Answer 3

很常用的算法，网上有很多例子，支持的浏览器是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

在 JavaScript 次更改后上传图片

Upload image after JavaScript changes

javascript

php

image-uploading

drupal-7