admin管理员组文章数量:1644413
说明:由于有裁剪图像的需求,所以就应用了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 图片截取功能兼容IE 内容由热心网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:https://www.elefans.com/dongtai/1729383690a1199276.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论