需求：
实现在线图片编辑，为原图片添加角标。
解决方案
添加Canvas
首先判断Canvas是否存在，如果不存在则创建Canvas对象。具体代码如下：
if(document.getElementById('materialCanvas')==null){
var materialCanvas = $("<canvas id='materialCanvas'></canvas>");
materialCanvas.width=1024;
materialCanvas.height=512;
console.log($("#pre"));
$("#pre").append(materialCanvas);
}
其中需要说明的是
- Canvas的宽高不需要加单位（单位为像素），其宽高默认为300*150。
- Canvas的宽高跟CSS的宽高不是一回事，不可混淆。
- drawImage函数中的位置参数都是以像素为单位的，画图中需要考虑画图位置、大小和Canvas边界。
下面在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的第一个参数是回调函数，转换完成后调用。第三个参数是图片质量，给我的感觉更像压缩比，进行适当的压缩可以在图片质量降低不多的情况下，最大限度的减小图片存储大小。注意：转换需要过程，回调函数是个异步的过程。
一个函数搞定，简直了。还是读书少啊！
