解决Cropperjs图片裁剪在IE内核浏览器兼容问题

 时间:2024-10-21 17:51:01

1、第一步,明确兼容问题所在。如下图可见,图片上传之后再浏览器里面显示非常小,明显不符合需求。

解决Cropperjs图片裁剪在IE内核浏览器兼容问题
解决Cropperjs图片裁剪在IE内核浏览器兼容问题

2、第二步,打开浏览器的开发者调试工具,查询DOM元素样式,显示宽200高100,找到问题所在。

解决Cropperjs图片裁剪在IE内核浏览器兼容问题

3、第三步,查找问题所在。在引用的cropper.css里面查找全局 200px ,没有找到,接着再去 cropper.js 里面查找,找到了如下代码。可以看到,cropperjs会比较$container.width(), num(options.minContainerWidth)两者的大小,取较大的值来设置样式。

解决Cropperjs图片裁剪在IE内核浏览器兼容问题

4、第四步,继续查询options.minContainerWidth和options.minContainerHeight,可以发现设置的值是200和100,正是在浏览器里面显示的样式。

解决Cropperjs图片裁剪在IE内核浏览器兼容问题

5、第五步,找到问题后就很容易解决了,只需要将options.minContainerWidth和options.minContainerHeight设置成你需要的合适尺寸就行。

6、第六步,改完options.minContainerWidth和options.minContainerHeight的值后,刷新页面,回到浏览器里面上传文件就可以看到合适的图片大小了,问题解决!

解决Cropperjs图片裁剪在IE内核浏览器兼容问题

7、第七步,写Bug不易,如果此篇经验帮到了你,辛苦大哥哥大姐姐们投票、点赞、打赏支持一下,谢谢支持!

解决Cropperjs图片裁剪在IE内核浏览器兼容问题
  • es文件浏览器如何查看应用锁
  • 手机搜狗输入法如何关闭上下文调频
  • 如何在微影邦器材租赁小程序中上传影视器材
  • 乐视超级手机EUI三大桌面之live桌面
  • 帮父母清理手机,腾讯手机管家远程操作教程
  • 热门搜索
    文明校园手抄报内容 新春手抄报 建军节手抄报 欢乐中国年手抄报 诗海拾贝手抄报 普通话手抄报简单字少 普通话的手抄报 法制手抄报内容资料 世界地球日手抄报内容 感恩手抄报图片大全