HTML5 Canvas画图、保存图片、提交文件问题

需求：

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

解决方案

添加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);
}

其中需要说明的是

1. Canvas的宽高不需要加单位（单位为像素），其宽高默认为300*150。
2. Canvas的宽高跟CSS的宽高不是一回事，不可混淆。
3. 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]);
}

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

1. globalCompositeOperation设置，此处用到destination-over（新图象在下）、source-over（新图像在上）两个参数。
2. 我们采用的图片来自不同的网站，存在跨域问题，需要设置图片允许跨域。具体设置属性为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");

其中

1. toDataURL函数是HTML5 Canvas对象的方法，可以将Canvas保存为Base64编码的图片。返回结果是一串Base64的编码。
2. 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的第一个参数是回调函数，转换完成后调用。第三个参数是图片质量，给我的感觉更像压缩比，进行适当的压缩可以在图片质量降低不多的情况下，最大限度的减小图片存储大小。注意：转换需要过程，回调函数是个异步的过程。
一个函数搞定，简直了。还是读书少啊！