关于H5裁剪图片后，直传阿里云的一些问题

这段时间在工作中碰到一个需要在h5裁剪图像，然后直传阿里云的需求。图中遇到了一些小问题，分享出来大家都看看。

h5裁剪图像：cropper.js是一个神器啊关于用法，网上可以收罗出大量的帖子，这里我就不多说了，大致原理就是利用canvas裁剪图像然后生成base64的图像（canvas.toDataURL('image/jpeg')）。

转换Blob对象：接下来就是重点了，上传图片我们比较传统的做法就是将 canvas.toDataURL('image/jpeg')  传到后台，然后后台再生成图片传到阿里云。

这样就显得比较繁琐了，怎么将 canvas.toDataURL('image/jpeg')直接传到阿里云？这就懵逼了。这里不得不提到js的另一个东西，Blob对象。

file对象大家都不陌生了，那这个blob又是个什么鬼呢？而实际上 file 对象只是 blob 对象的一个更具体的版本，blob 存储着大量的二进制数据，并且 blob 的 size 和 type 属性，都会被 file 对象所继承。

所以， 在大多数情况下，blob 对象和 file 对象可以用在同一个地方，例如，可以使用 FileReader 借口从 blob 读取数据，也可以使用 URL.createObjectURL() 从 blob 创建一个新的 URL 对象。

这里我先用了canvas一个最简单的办法，创建blob。canvas.toBlob(callback,type,quality);我们可以直接把上传图片的方法写到回调里面，type：类型（图片：‘image/jpeg’）,quality:图片质量（0-1）.

当然这么高级的方法肯定会涉及到兼容性问题。那我们就回到blob对象的问题上来吧。在chrome早先版本和目前的android中，至少是andrid5.1之前的浏览器，包括微信浏览器等，都不支持blob的构造方法，需要使用BlobBuilder。

var file=new Blob( [array.buffer], {type : "image/jpeg"});//会存在兼容性问题。这个blob的构造方法，在ios手机浏览器是支持的，但是在android手机浏览器不行。

桌面版的chrome浏览器解决了这个blob bug, 但是android手机还是有这个问题，会返回一个type error，因为android浏览器不支持这个构造方法。你必须使用老版本的BlobBuilder API.

解决办法：

 //首先要将dataURL转换为Uint8Array对象：

               function dataURLtoBlob(dataurl) {
                            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
                                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
                            while(n--){
                                 u8arr[n] = bstr.charCodeAt(n);
                                }
                            return  u8arr ;
                         }
            // 接下来的事情就好办多了，来一发兼容性blob写法：
            try{
                var jpeg = new Blob( [array], {type : "image/jpeg"});
               }
            catch(e){
             // TypeError old chrome and FF
             window.BlobBuilder = window.BlobBuilder || window.WebKitBlobBuilder || window.MozBlobBuilder || window.MSBlobBuilder;
             if(e.name == 'TypeError' && window.BlobBuilder){
                 var bb = new BlobBuilder();
                 bb.append([array.buffer]);
                 var jpeg = bb.getBlob("image/jpeg");
            }
            else if(e.name == "InvalidStateError"){
                 // InvalidStateError (tested on FF13 WinXP)
                  var jpeg = new Blob( [array.buffer], {type : "image/jpeg"});
            }
           else{
                // We're screwed, blob constructor unsupported entirely
             }
           }

　　

上传到阿里云：
            我查了一下阿里云的web直传的Js示例代码，感觉写的有点复杂，还是用ajax来解决这个问题吧，还是先上代码再来大致讲一下这个问题吧。

  Utils.ajax({
                            url: url1,//url1是先向后台请求上传阿里云的一些参数接口
                            success: function (res) {
                                    if (res.errorCode == 0) {
                                           var ossData=new FormData();
                                                 ossData.append("OSSAccessKeyId",res.data.accessId);//Bucket 拥有者的Access Key Id。
                                                 ossData.append("policy",res.data.policy);//policy规定了请求的表单域的合法性
                                                 ossData.append("Signature",res.data.signature);//根据Access Key Secret和policy计算的签名信息，OSS验证该签名信息从而验证该Post请求的合法性
                                                 //---以上都是阿里的认证策略
                                                ossData.append("key",res.data.dir+'/'+res.data.filename+'.jpg');//文件名字，可设置路径
                                               ossData.append("success_action_status",'200');// 让服务端返回200,不然，默认会返回204
                                               ossData.append('file', jpeg);//需要上传的文件 file 这个
                                               //接下来就是上传阿里云了的代码了
                                              //ossData.append("callback",callbackbody);//回调，非必选，可以在policy中自定义
                                              $.ajax({
                                                        url : res.data.host, //上传阿里地址
                                                         data : ossData,
                                                        processData: false,//默认true，设置为 false，不需要进行序列化处理
                                                        cache: false,//设置为false将不会从浏览器缓存中加载请求信息
                                                        async: false,//发送同步请求
                                                       contentType: false,//避免服务器不能正常解析文件---------具体的可以查下这些参数的含义
                                                       //dataType: 'JSON',//不涉及跨域 写json即可
                                                        type : 'post',
                                                       success : function(callbackHost, request) {}， //callbackHost：success,request中就是 回调的一些信息，包括状态码什么的
                                                       error : function() {
                                                                   alert("图片上传出错！")
                                                      }
                                                });
                                      }
                                 }
                            });

　　

其实Utils.ajax和$.ajax都是一样的，为了区分我这样写的，Utils.ajax的请求是为了得到后台的验证。上传阿里云的一些证书啊，验证码什么的。$.ajax就是上传到阿里云的请求。值得注意点是：

ossData.append('file', jpeg);//需要上传的文件 file 这个jpeg就是我们前面创建的blob。一般上传到阿里云成功后如果不返回任何东西，就不要写入dataType了。

过程大概就是这样，参考了几个人的文章推荐给大家：https://www.cnblogs.com/flicat/p/5337054.html       TypeArray、ArrayBuffer、Blob、File、DataURL、canvas的相互转换

http://blog.csdn.net/u012811805/article/details/53885008  移动端UC浏览器不支持Blob的解决方案

https://www.cnblogs.com/mottled/p/6979536.html              阿里OSS ajax方式 web直传