17666030540

网站建设 APP开发 小程序

KNOWLEDGE/知识

分享你我感悟

您当前位置>主页 > 知识 > 小程序 >

小程序开发日记 -- 图片压缩

发表时间:2020-05-28 18:36

文章来源:快明科技

浏览次数:



图片来自 Pixiv,Skitterphoto


今天们探究一下在微信小程序中如何压缩一张图片。


首先来看看 中都有哪些地方用到了图片压缩吧。


1)首页 -> 小测试 ->  功能用到了一些Canvas和图片方面的API,其中在Canvas转图片时使用了可选择压缩程度的API的调用,也就是

wx.canvasToTempFilePath这个接口。


2)词本 中的 功能,因为用到了第三方图片识别接口,需要先选择图片(wx.chooseImage),然后上传进行识别。从表面上看,wx.chooseImage这个API只提供选择图片的功能,但实际上它也具备一定的压缩功能。


那么在微信小程序适合给图片做压缩的API到底有哪些呢?它们又有哪些特点呢?我们一一来看下。


● wx.chooseImage(Object object)

从本地相册选择图片或使用相机拍照。



指定sizeType为['compressed'],即代表从相册或相机拍照后的图片会执行压缩操作。


wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success (res) { const tempFilePaths = res.tempFilePaths }})



● wx.compressImage(Object object)

压缩图片接口,可选压缩质量。基础库>=2.4.0



使用这个API时需要注意基础库的版本。它可以指定压缩的质量[0-100],但只针对jpg,不支持网络图片。可以配合chooseImage来使用。


wx.chooseImage({ count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'], success (res) { const tempFilePaths = res.tempFilePaths wx.compressImage({      src: tempFilePaths[0]      quality: 80,      success (compressRres) {       const tempFilePath = compressRres.tempFilePath       } }) }})



● CameraContext.takePhoto(Object object)

拍摄照片。



其中quality(成像质量)参数可以设置为high, normal, 或者low,指定为low即代表可以进行一定程度的压缩。

const ctx = wx.createCameraContext()ctx.takePhoto({  quality'low', success: (res) => { const tempImagePath = res.tempImagePath }})


除了以上几个API之外,还有一个API也可以变相地实现图片压缩处理,前提是需要一个Canvas组件,然后调用这个API将Canvas转换成图片。


wx.canvasToTempFilePath(Object object, Object this)

把当前画布指定区域的内容导出生成指定大小的图片。



这个API只针对画布(Canvas)组件有效,但它有个好处就是可以指定输出图片的尺寸,而且还有个参数quality可以同时指定图片的质量(但仅对 jpg 有效)


wx.canvasToTempFilePath({ x: 100, y: 200, width: 50, height: 50, destWidth: 100, destHeight: 100,  fileType: 'jpg,'  quality: 0.8, canvasId: 'myCanvas', success(res) {    const tempFilePath = res.tempFilePath }})


以上就是微信小程序中涉及图片压缩的一些API介绍。


当然抛开微信小程序的API,压缩图片还有许多方式可以实现,比如使用自定义的裁剪功能,将大图片裁剪为小图片,然后再进行一次压缩。又如直接使用第三方库提供的图片裁剪功能,另外还可以直接将图片上传至第三方存储服务,比如七牛云、阿里,腾讯的OSS等,后端接口调取图片时直接使用他们提供的图片处理技术(url后拼接参数即可)。



微信号:agooee     微博:@fromyears



推荐阅读:

本文由快明科技整理发布,如需转载请联系852657156@qq.com

相关案例查看更多