需求：

实现在线图片编辑，为原图片添加角标。

解决方案 添加Canvas

首先判断Canvas是否存在，如果不存在则创建Canvas对象。具体代码如下：

if(document.getElementById('materialCanvas')==null){ var materialCanvas = $("<canvas></canvas>"); materialCanvas.width=1024; materialCanvas.height=512; console.log($("#pre")); $("#pre").append(materialCanvas); }

其中需要说明的是

下面在Canvas中画图

img1是角标图片，其位置通过用户选择映射为不同的参数，具体代码如下：

var ctx = document.getElementById('materialCanvas').getContext('2d'); var img = new Image(); img.crossOrigin="anonymous"; img.src='<s:url value="/css/images/demo.jpg" />'; var img1 = new Image(); img1.crossOrigin="anonymous"; img1.src=corner.url; ctx.clearRect(0,0,300,150); img.onload=function(){ ctx.globalCompositeOperation="destination-over";//source-over ctx.drawImage(img,0,0,1024,512); } img1.onload=function(){ ctx.globalCompositeOperation="source-over";//source-over ctx.drawImage(img1,positionmap[cornerPosition][0],positionmap[cornerPosition][1]); }

此处要留意两个问题，分别是：

globalCompositeOperation设置，此处用到destination-over（新图象在下）、source-over（新图像在上）两个参数。

我们采用的图片来自不同的网站，存在跨域问题，需要设置图片允许跨域。具体设置属性为crossOrigin，参数为anonymous。

将Canvas保存为图片文件

代码如下：

function convertBase64UrlToBlob(urlData,type){ var bytes=window.atob(urlData.split(',')[1]); //去掉url的头，并转换为byte //处理异常,将ascii码小于0的转换为大于0 var ab = new ArrayBuffer(bytes.length); var ia = new Uint8Array(ab); for (var i = 0; i < bytes.length; i++) { ia[i] = bytes.charCodeAt(i); } return new Blob( [ab] , {type : 'image/'+type}); } var ctx = document.getElementById('materialCanvas'); var dataURL = ctx.toDataURL("image/png",1.0); var file1=convertBase64UrlToBlob(dataURL,"png");

其中

toDataURL函数是HTML5 Canvas对象的方法，可以将Canvas保存为Base64编码的图片。返回结果是一串Base64的编码。

convertBase64UrlToBlob函数将图片的Base64编码转化为blob文件对象。

最后将文件提交： var filename=$("#textfield").val(); filename=filename.split("\\"); file1.name=filename[filename.length-1]; var formobj = document.getElementById("uploadForm"); var formdata = new FormData(formobj); formdata.set("file", file1,file1.name); $.ajax({ url : "http://localhost:8085/material/upload", type : "POST", data : formdata, cache: false, processData: false, contentType: false, success : function(data) { $( '#serverResponse').html(data); }, error : function(data) { $( '#serverResponse').html(data.status + " : " + data.statusText + " : " + data.responseText); } })

其流程为根据原文件表单获取Formdata，将新文件赋值给Formdata对象，使用Ajax提交Formdata数据。
PS：Formdata的set方法是设置key、value。其他还有很多API具体Google或百度。

Over！

9月6日更新：

上文中将Canvas保存为图片文件的程序转化后的文件会比图片原来的文件大很多，例如10KB的jpg图片转换后会变为大概80KB，对于文件上传有大小限制的情景不适用。
我又找到新的转换方式，具体code如下：

var ctx = document.getElementById('materialCanvas'); var file1; ctx.toBlob(function(blob){file1=blob},"image/jpeg",0.6);

其中toBlob的第一个参数是回调函数，转换完成后调用。第三个参数是图片质量，给我的感觉更像压缩比，进行适当的压缩可以在图片质量降低不多的情况下，最大限度的减小图片存储大小。注意：转换需要过程，回调函数是个异步的过程。
一个函数搞定，简直了。还是读书少啊！