如何上传 canvas 的 toDataURL 中的内容

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