1200字范文,内容丰富有趣,写作的好帮手!
1200字范文 > IE浏览器对象不支持Blob属性或方法 IE浏览器不支持canvas toBlob()方法的Polyfill

IE浏览器对象不支持Blob属性或方法 IE浏览器不支持canvas toBlob()方法的Polyfill

时间:2023-09-04 10:11:00

相关推荐

IE浏览器对象不支持Blob属性或方法 IE浏览器不支持canvas toBlob()方法的Polyfill

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

解决方案:其实在/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) {},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。