此文章发布于39
个月前,部分信息可能已经过时
,请自行斟酌确认。
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。