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

来源：互联网 2023-02-21 23:28:59 139

在vue项目里面开发时，遇到一个图片裁剪的需求，度娘一番搜索之后找到cropperjs这个棒棒的插件，开发完成交付测试，结果在IE内核浏览器里面显示图片太小，不符合需求，被打回来了。无奈之下，花了一天时间解决这个cropperjs在IE内核浏览器的兼容问题....

工具/原料

电脑

方法/步骤

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

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

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

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

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

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