一、问题
针对旧项目翻新,旧的项目是使用lrz(官网)插件压缩图片,的项目了使用原生js写的,原项目上传拍照图片不会有旋转的问题,要翻成vue+webpack,同样使用lrz压缩图片时在部分小米手机和ios就会出现图片旋转的问题,其实不压缩图片时图片就是旋转的,就想有没有一个压缩组件又可以压缩又可以解决原本图片的旋转问题。
二、解决
最终找到了这个宝藏组件compressorjs,可以兼容安卓和ios解决旋转问题,其实在这之前试了lrz-lw等压缩组件都是只能兼容ios或者小米。可以使用测试链接来拍照上传看看该组件是否兼容你的测试机。下面就来看看怎么使用:
安装:
npm install compressorjs
使用:
<!-- html --><input type="file" id="file" accept="image/*" @change="onFileChange">// jsimport Compressor from 'compressorjs'methods: {onFileChange (e) {// 压缩图片 new Compressor(file, options)new Compressor(e.target.files[0], {quality: 0,success: result => {let reader = new FileReader()reader.readAsDataURL(result)reader.onload = () => {console.log('压缩后的图片:', reader.result)}},error (err) {console.log(err.message)}})}}
组建的详细参数可以查看官方说明,很详细。
如果本文对你有些许帮助,动动手指点个赞吧,你的鼓励是我创作的动力,笔芯♥。