uni-app:图片压缩上传组件 mx-compress

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-compresshttps://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。

最后修改:2021 年 08 月 25 日 11 : 26 AM
如果觉得我的文章对你有用,请随意赞赏

发表评论