经常需要在 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 文件写盘即可