目录
前言：
问题：现有的压缩方案支付宝小程序不生效
解决方案：
uni.createCanvasContext(canvasId, this)
核心代码展示：
1，封装公用工具类compressImage.js
2，html调用并上传服务器：
小结：
前言： 由于公司业务拓展，急需基于uniapp生成支付宝小程序。之前已经成功将微信小程序和H5融合成一套码，故得知此需求的时候，笔者信心十足，但是本着实践出真知的想法，觉得还是得先调研一下uniapp在支付宝小程序的兼容性，并集成已有项目主体关键功能，为后续的技术调研方案做准备。在调研过程中，发现之前封装好的图片压缩方法在支付宝小程序上无法正常使用，重新阅读了官方文档后，又双更新了项目的图片压缩方法的使用流程。
问题：现有的压缩方案支付宝小程序不生效 之前封装好的压缩方案，原理是使用canvas现实的，但是在支付宝小程序端不生效，canvas相关的api存在但是不可用。
解决方案： 查阅文档后，给canvas添加了id区分支付宝小程序，可兼容之。
以下是官方文档原文
uni.createCanvasContext(canvasId, this)核心代码展示： 1，封装公用工具类compressImage.js
#定义
画布表示，传入定义在的 canvas-id或id（支付宝小程序是id、其他平台是canvas-id）
/**
* 给的文件资源是否小于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) //画板的宽高默认是windowWidthvar windowW = drawWidth
var scale = 1if (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调用并上传服务器：
您最多可上传{{maxCount}}张图片
确定
.upload-page {
position: relative;
width: 750rpx;
height: 100vh;
background-color: #ffffff;
}.upload-tips {
width: 750rpx;
height: 80rpx;
background-color: #fffbe8;
font-size: 28rpx;
color: #ed6a0c;
line-height: 80rpx;
text-align: center;
}.image-list {
box-sizing: border-box;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
align-items: center;
width: 750rpx;
padding: 30rpx;
}.image-item {
position: relative;
box-sizing: border-box;
width: 210rpx;
height: 210rpx;
margin-right: 30rpx;
margin-bottom: 30rpx;
border: 1rpx solid #ebedf0;
}.image-item:nth-child(3n) {
margin-right: 0;
}.image-item .image {
width: 210rpx;
height: 210rpx;
}.image-item .image-delete {
position: absolute;
top: -30rpx;
right: -30rpx;
width: 40rpx;
height: 40rpx;
padding: 10rpx;
}.upload-btn {
position: fixed;
bottom: 0;
left: 0;
width: 750rpx;
height: 100rpx;
background-color: $primary;
font-size: 30rpx;
color: #ffffff;
line-height: 100rpx;
text-align: center;
}.press-canvas {
position: absolute;
top: -1000px;
left: -1000px;
background-color: gray;
width: 750px;
height: 750px;
}
小结： 以上就是笔者分享的图片压缩上传的方法封装及使用啦，完美兼容支付宝小程序，微信小程序及H5三端。希望对大家有所帮助。如有错误希望各位大神多多指教。
【#|微信小程序开发之图片压缩方案】
文章图片
推荐阅读
- #|【小程序】微信小程序版本更新如何通知用户（）
- 前端|【中秋快乐】如何用three.js实现我的太空遐想3D网页
- JavaScript|JS 防抖和节流实现详解
- javascript|js防抖和节流
- JavaScript|JavaScript 防抖和节流的实现
- javascript|javascript防抖和节流原理
- ajax|猿创征文 | 如何使用原生AJAX请求数据
- 微信小程序毕业设计项目|微信小程序毕业设计题目计算机维修服务+后台管理系统|前后分离VUE.js
- #|基于蒙特卡洛的大规模电动汽车充电行为分析（Matlab代码实现）