微信小程序开发指南之图片压缩解决方案

网友投稿 1057 2023-11-14

−目录前言：问题：现有的压缩方案支付宝小程序不生效解决方案：核心代码展示：附：微信小程序图片压缩(支持多张图)小结：

前言：

由于公司业务拓展，急需基于uniapp生成支付宝小程序。之前已经成功将微信小程序和H5融合成一套码，故得知此需求的时候，笔者信心十足，但是本着实践出真知的想法，觉得还是得先调研一下uniapp在支付宝小程序的兼容性，并集成已有项目主体关键功能，为后续的技术调研方案做准备。在调研过程中，发现之前封装好的图片压缩方法在支付宝小程序上无法正常使用，重新阅读了官方文档后，又双更新了项目的图片压缩方法的使用流程。

问题：现有的压缩方案支付宝小程序不生效

微信小程序开发指南之图片压缩解决方案

之前封装好的压缩方案，原理是使用canvas现实的，但是在支付宝小程序端不生效，canvas相关的api存在但是不可用。

解决方案：

查阅文档后，给canvas添加了id区分支付宝小程序，可兼容之。

以下是官方文档原文

uni.createCanvasContext(canvasId, this)

#定义

画布表示，传入定义在 <canvas/> 的 canvas-id或id（支付宝小程序是id、其他平台是canvas-id）

核心代码展示：

1，封装公用工具类compressImage.js

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
/**
* 给的文件资源是否小于LimitSize （M）, 小于走lessCallBack， 大于走moreCallBack
*/
export function imageSizeIsLessLimitSize(imagePath, limitSize, lessCallBack, moreCallBack) {
uni.getFileInfo({
filePath: imagePath,
success(res) {
console.log(压缩前图片大小:, res.size / 1024, kb)
if (res.size > 1024 * 1024 * limitSize) {
moreCallBack()
} else {
lessCallBack()
}
}
})
} // 主调用方法
/**
* 获取小于限制大小的Image, limitSize默认为1M，递归调用。
*/
export function getLessLimitSizeImage(canvasId, imagePath, limitSize = 1, drawWidth, callBack) {
imageSizeIsLessLimitSize(
imagePath,
limitSize,
(lessRes) => {
callBack(imagePath)
},
(moreRes) => {
uni.getImageInfo({
src: imagePath,
success: function(imageInfo) {
var maxSide = Math.max(imageInfo.width, imageInfo.height) //画板的宽高默认是windowWidth
var windowW = drawWidth
var scale = 1
if (maxSide > windowW) {
scale = windowW / maxSide
}
var imageW = Math.floor(imageInfo.width * scale)
var imageH = Math.floor(imageInfo.height * scale)
console.log(调用压缩, imageW, imageH)
getCanvasImage(canvasId, imagePath, imageW, imageH, (pressImgPath) => {
getLessLimitSizeImage(canvasId, pressImgPath, limitSize, drawWidth * 0.7, callBack)
})
}
})
}
)
}
/**
* 获取画布图片
*/
export function getCanvasImage(canvasId, imagePath, imageW, imageH, getImgsuccess) {
const ctx = uni.createCanvasContext(canvasId)
ctx.drawImage(imagePath, 0, 0, imageW, imageH)
ctx.draw(false, () => {
uni.canvasToTempFilePath({
canvasId: canvasId,
x: 0,
y: 0,
width: imageW,
height: imageH,
quality: 1,
success(res) {
getImgsuccess(res.tempFilePath)
}
})
})
}
export default {
getLessLimitSizeImage,
imageSizeIsLessLimitSize,
getCanvasImage
}

2，html调用并上传服务器：

附：微信小程序图片压缩(支持多张图)

原理上是使用canvas实现的，小于100k的图片不做压缩。

?
1
var {getCanvasImg} = require(../../common/img-compression.js); // 在page上面按需引入

然后在wx.chooseImage接口成功回调中调用(使用tempFiles字段，因为它包含了图片大小)

?
1
2
3
4
5
let tempFiles = result.tempFiles;
let i = 0;
var arr = [];
// par1：this； par2：图片压缩数组，含size字段；par3：递增值，默认先传入0； par4：接收压缩结果数组； par5：设置画布大小回调函数； par6：设置压缩后的图片数组
getCanvasImg(that, tempFiles, i, that.data.quality, arr, that.setCanvasSize, that.setCompImg);

在定义两个回调函数，用于设置画布大小和接收压缩结果

?
1
2
3
4
5
6
7
8
9
10
11
12
13
// 设置画布大小
setCanvasSize(cWidth, cHeight){
this.setData({
cWidth,
cHeight
});
},
// 接收压缩结果
setCompImg(imagePath){
this.setData({
imagePath // 压缩结果
})
},

至此使用步骤已介绍完毕

小结：

以上就是笔者分享的图片压缩上传的方法封装及使用啦，完美兼容支付宝小程序，微信小程序及H5三端。

到此这

您可能感兴趣的文章:微信小程序中上传图片并进行压缩的实现代码微信小程序实现图片压缩功能微信小程序实现图片压缩微信小程序之批量上传并压缩图片的实例代码微信小程序上传图片并等比列压缩到指定大小的实例代码微信小程序对图片进行canvas压缩的方法示例详解

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 微信小程序 小程序 示例 代码
上一篇:简单app开发用什么软件
下一篇:手机app制作开发好了之后如何变现赚钱？
相关文章

 发表评论

暂时没有评论，来抢沙发吧~