小程序开发日记 -- 图片压缩
发表时间: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