html5以文件形式上传canvas内容到服务端

要上传canvas中的内容到服务端，总共分为三步：

1. 取出canvas中的内容：取到内存中。
2. 构建上传用的FormData
3. 通过Ajax上传

详细内容如下：

1. 以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最新版本上测试通过了。

2. 构造FormData

function createFormData(blob){
  var formData = new FormData();
  formData.append("file", blob);
  return formData;
}

3. 通过ajax上传

function sendFormData(formData){
  var ajax = new XMLHttpRequest();
  ajax.open("post", "/upload");
  ajax.send(formData);
}