cropper 图片截取功能兼容IE

admin管理员组

文章数量:1644397

说明：由于有裁剪图像的需求，所以就应用了Cropper.js插件，但是在IE浏览器就爆出了兼容blob问题。

解决方案：在https://www.canvasapi/HTMLCanvasElement/toBlob#&othersCanvas 中文官网官方网站有给出IE浏览器的兼容解决方案。

兼容：
首先，toBlob()方法IE9浏览器不支持，因为Blob数据格式IE10+才支持。

然后，对于IE浏览器，toBlob()的兼容性有些奇怪，IE10浏览器支持ms私有前缀的toBlob()方法，完整方法名称是msToBlob()。而IE11+，toBlob()方法却不支持。
但是，我们可以基于toDataURL()方法进行polyfill，性能相对会差一些，JavaScript代码如下：

if (!HTMLCanvasElement.prototype.toBlob) {
  Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
    value: function (callback, type, quality) {
      var canvas = this;
      setTimeout(function() {
        var binStr = atob( canvas.toDataURL(type, quality).split(',')[1] );
        var len = binStr.length;
        var arr = new Uint8Array(len);
        for (var i = 0; i < len; i++) {
          arr[i] = binStr.charCodeAt(i);
        }
 
        callback(new Blob([arr], { type: type || 'image/png' }));
      });
    }
  });
}

具体操作方案就是在自己的代码前面把上面的代码复制进自己的js文件调用.toBlob之前即可，什么都不需要修改，具体如下

 //兼容IE
  if (!HTMLCanvasElement.prototype.toBlob) {
    Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
      value: function (callback, type, quality) {
        var canvas = this;
        setTimeout(function() {
          var binStr = atob( canvas.toDataURL(type, quality).split(',')[1] );
          var len = binStr.length;
          var arr = new Uint8Array(len);
   
          for (var i = 0; i < len; i++) {
            arr[i] = binStr.charCodeAt(i);
          }
   
          callback(new Blob([arr], { type: type || 'image/png' }));
        });
      }
    });
  }
  //获取数据
  image.cropper("getCroppedCanvas",{
      width: saveW,
      height: saveH
  }).toBlob(function(blob){
      var formData=new FormData();
      formData.append('file',blob,'head.jpg');
      $.ajax({
          method:"post",
          url: url, //用于文件上传的服务器端请求地址
          data: formData,
          processData: false,
          contentType: false,
          success:function(result){
              if(result.code == 0){
                  //layer.msg(result.msg,{icon: 1});
                  layer.closeAll('page');
                  return done(result);
              }else if(result.code == -1){
                  layer.alert(result.msg,{icon: 2});
              }

          }
      });
  });

这边开发的 cropper 是配合layui开发的，附上crooper配合layui的下载地址：
https://fly.layui/extend/croppers/

本文标签： 功能图片Cropper