Question

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

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

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

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

Answer 1

这是非常常见的算法，在互联网上有很多例子，支持的浏览器是10个即所有现代浏览器。

 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

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

Answer 3

由于您有一个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 ，请将图片重命名并保存为上传___ 00fc00.png < / p>

现在您只需要一个javascript函数来从图像的新名称获取边框颜色，创建边框并将其应用于图像。

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

JavaScript更改后上传图片

3 个答案: