此文章发布于51个月前,部分信息可能已经过时,请自行斟酌确认。
mx-compress:
Gitee:https://gitee.com/ifu25/uni-app-mx-compress
前言
之前写 H5 时用过的图片压缩组件:
https://github.com/WangYuLue/image-conversion
https://github.com/fengyuanchen/compressorjs
以上两个组件在 uni-app 上都多少有些问题,所以建议从 ui-app 官方插件市场找个用。
找到了 x-compress:https://ext.dcloud.net.cn/plugin?id=2816
x-compress 使用问题:
1、小程序压缩后是 png
因为他的代码中有用到 uni.canvasToTempFilePath(),而这个方法没有指定 fileType 参数,默认是 png,所以需要处理一下,我项目中只用 jpg 所以直接写 jpg 了。
2、上传
使用挺方便,H5 和小程序测试没问题一切正常。但小程序真机调试有问题,是直接不能用。
- 1)
template调用组件的地方会显示出图片(虽然看已经设置了visibility: 'hidden'但没起效果),我的解决方案是添加了样式:style="left:-9000px;top:-9000px;"。 - 2)致命的,
压缩出的图片变形且不全,经过反复测试发现在调用this.ctx.draw时增加一个延时setTimeout 1.5秒 再执行uni.canvasToTempFilePath就好了。据说是得留一定的时间绘制 canvas,参考:https://www.jianshu.com/p/1b8a1e96a6d5
基于以上问题,改造 x-compress 编写了 mx-compress。