要上传canvas中的内容到服务端，总共分为三步：
- 取出canvas中的内容：取到内存中。
- 构建上传用的FormData
- 通过Ajax上传
详细内容如下：
- 以Blob形式取出canvas内容：
针对取出canvas中的内容，网上流行的说法是通过canvas.toDataURL()方法，取出canvas的Base64编码内容。但是因为FormData中需要的是Blob对象，所以需要做一个转换，转换代码如下：
function dataURL2Blob(dataURL){
var binaryString = dataURL.split(",")[1];
var mimeType = dataURL.split(",")[0].match(/:(.*);/)[1];
var length = binaryString.length;
var ua = new Uint8Array(length);
while(length--){
ua[length] = binaryString.charCodeAt(length);
}
return new Blob([ua.buffer], {type: mimeType});
}
但是这个方法的坏处是需要做一次全量拷贝，针对较大的文件效率会下降，经过试用，发现了如下方法：
function canvas2Blob(canvas, cb){
if(canvas.msToBlob){ //兼容IE
cb(canvas.msToBlob());
} else { //非IE内核
canvas.toBlob(cb);
}
}
目前在IE10+、chrome和opera最新版本上测试通过了。
- 构造FormData
function createFormData(blob){
var formData = new FormData();
formData.append("file", blob);
return formData;
}
- 通过ajax上传
function sendFormData(formData){
var ajax = new XMLHttpRequest();
ajax.open("post", "/upload");
ajax.send(formData);
}
