360兼容模式不能截取图片？？

[caozhx]

极速模式下可以正常操作，兼容模式截取框不出现，下面是我获取本地图片后做的处理 uploadChange(file) { const isLt5M = file.size / 1024 / 1024 < 2; if (!isLt5M) { this.$message.error("上传的文件大小不能超过2M"); return; } let reader = new FileReader(); reader.onload = event => { this.option.img = event.target.result; }; reader.readAsDataURL(file.raw); }， 打印日志各个对象都正常

[xyxiao001]

有报错嘛

[caozhx]

有报错嘛

没有报错，每个对象打印出来都是好的，就是界面上的截图框不出来，选中的图片也不出来

[caozhx]

有报错嘛

是不是IE内核都不支持，360浏览器、qq浏览器等选择了兼容模式都不能正常使用，兼容模式的内核是IE内核

[caozhx]

[Vue warn]: Error in callback for watcher "img": "Error: 拒绝访问。

报错

[xyxiao001]

http://github.xyxiao.cn/vue-cropper/example/

[xyxiao001]

看看例子可以在上面使用嘛，还有 360 兼容模式的 ie 版本是多少

[caozhx]

看看例子可以在上面使用嘛，还有 360 兼容模式的 ie 版本是多少

不支持，在线例子页面在360兼容模式不能打开，直接显示不支持。 我的IE设置7-11都不正常

[xyxiao001]

目前只兼容到 ie11 360 的这个我去看看

[caozhx]

目前只兼容到 ie11 360 的这个我去看看 嗯，

[xinyiPig]

https://blog.csdn.net/qq_36671474/article/details/100545250?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase @xyxiao001 @caozhx 好像因为ie内核浏览器对 readAsDataURL()不支持，导致源码里边的 watch(){ img()=>{}} 监听图像变化失败，在调用vue-cropper这个插件前 要自行判断一下是否为ie,是的话就用 URL.createObjectURL(file)这种方式

[xinyiPig]

在Ie中生成裁剪后的图片，也需要做适配 基于 vue 定义function start dataURLtoBlob (dataurl, fileName = 'file') { var arr = dataurl.split(',') var mime = arr[ 0 ].match(/:(.?);/)[ 1 ] let suffix = mime.split('/')[ 1 ] var bstr = atob(arr[ 1 ]) var n = bstr.length var u8arr = new Uint8Array(n) while (n--) { u8arr[ n ] = bstr.charCodeAt(n) } this.fileType = mime.split('/')[ 1 ] return new Blob([ u8arr ], { type: mime }) }, // 将blob转换成file blobToFile (theBlob, fileName = 'file') { theBlob.lastModifiedDate = new Date() theBlob.name = fileName theBlob.filename = fileName + this.fileType return theBlob }, IEVersion () { var userAgent = navigator.userAgent // 取得浏览器的userAgent字符串 var isIE = userAgent.indexOf('compatible') > -1 && userAgent.indexOf('MSIE') > -1 // 判断是否IE<11浏览器 var isEdge = userAgent.indexOf('Edge') > -1 && !isIE // 判断是否IE的Edge浏览器 var isIE11 = userAgent.indexOf('Trident') > -1 && userAgent.indexOf('rv:11.0') > -1 if (isIE) { var reIE = new RegExp('MSIE (\d+\.\d+);') reIE.test(userAgent) var fIEVersion = parseFloat(RegExp[ '$1' ]) if (fIEVersion === 7) { return 7 } else if (fIEVersion === 8) { return 8 } else if (fIEVersion === 9) { return 9 } else if (fIEVersion === 10) { return 10 } else { return 6// IE版本<=7 } } else if (isEdge) { return 'edge'// edge } else if (isIE11) { return 11 // IE11 } else { return -1// 不是ie浏览器 } } // 高版本浏览器 dataURLtoFile (dataurl, filename = 'file') { let arr = dataurl.split(',') let mime = arr[ 0 ].match(/:(.?);/)[ 1 ] let suffix = mime.split('/')[ 1 ] let bstr = atob(arr[ 1 ]) let n = bstr.length let u8arr = new Uint8Array(n) while (n--) { u8arr[ n ] = bstr.charCodeAt(n) } return new File([ u8arr ], filename+"."+{suffix}, { type: mime }) }, 定义function end

使用function start // 适配ie if (this.IEVersion() !== -1) { file = this.blobToFile(this.dataURLtoBlob(data)) } else { file = this.dataURLtoFile(data) } 使用function end