|
经常需要在 web 前端生成图片然后上传到服务器上，在前端生成自定义图片可以使用 html5 中的 canvas ，然后使用 canvas 的 toDataURL 获得图片内容数据。但如果要上传该图片内容，因为使用字符串形式提交有长度限制， 所以还需要将这些字符串形式的内容转为二进制内容的 Blob 对象，下面分为两部分来说明：
1. 服务器端 java
响应代码中需要定义一个 File 类型的变量，设为
File myfile；
2. web 客户端 javascript
1） 使用 canvas 生成图片内容
var dataURL = canvas.toDataURL("image/jgp");
2) 去除 data URL 中的头部说明
var img64 = dataURL.replace(/^data:image\/(png|jpg);base64,/,"")
3) 使用函数 atob 将字符串形式的内容转为二进制形式的数据
var binaryImg = atob(img64);
4) 创建 ArrayBuffer 并使用 Uint8 的方式给它赋值（ArrayBuffer 的使用方式有点怪异）
var arraybuffer = new ArrayBuffer(binaryImg.length);
var uint8 = new Uint8Array(arraybuffer);
for (var i=0; i<length; i++){
uint8[i] = binaryImg.charCodeAt(i);
}
5) 使用 ArrayBuffer 对象生成 Blob
blob = new Blob([arraybuffer);
6) 构造 Formdata，准备上传 Blob
var form = new Formdata();
7) 将 Blob 对象加入 form data 中，注意属性的名称与 server 端的变量名称一致
form.append("myfile", blob);
8) 上传 form
var req = new XMLHttpRequest();
req.open("POST", yourServerURL);
req.send(form);
到此，即可将 canvas 生成的 dataURL 内容上传到服务器端，服务器端只需要将收到内容形成 jpg 文件写盘即可 | 
转播
