blob没权限 ie_IE浏览器对象不支持Blob属性或方法,IE浏览器不支持canvas toBlob()方法的Polyfill...

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

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

兼容:

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

然后,对于IE浏览器,toBlob()的兼容性有些奇怪,IE10浏览器支持ms私有前缀的toBlob()方法,完整方法名称是msToBlob()。而IE11+,toBlob()方法却不支持。

但是,我们可以基于toDataURL()方法进行polyfill,性能相对会差一些,JavaScript代码如下,参考自MDN:

// 登录状态下不会出现这行文字,点击页面右上角一键登录

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之前即可,什么都不需要修改,下面是实例:

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' }));

});

}

});

}

$('#img').cropper("getCroppedCanvas").toBlob(function (blob) {

var filesize = blob["size"];

var fileType = blob["type"];

if (filesize && fileType) {

var fileName = "myImage." + fileType.substring(6, fileType.length);

var objecturl = window.URL.createObjectURL(blob);

$("#tempImg").attr("src", objecturl);

var formData = new FormData();

formData.append('fileName', fileName);

formData.append('image', blob);

formData.append('type', 'service');

$.ajax({

type: 'POST',

url: '/uploadpic',

dataType: 'json',

processData: false,

contentType: false,

data: formData,

success: function (res) {},

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值