您现在的位置是：网站首页> 编程资料编程资料

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

2023-05-24 311人已围观

简介微信小程序开发指南之图片压缩解决方案_javascript技巧_

前言：

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

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

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

解决方案：

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

以下是官方文档原文

uni.createCanvasContext(canvasId, this)
#定义
画布表示，传入定义在

核心代码展示：

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

/** * 给的文件资源是否小于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的图片不做压缩。

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

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

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);

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

// 设置画布大小 setCanvasSize(cWidth, cHeight){ this.setData({ cWidth, cHeight }); }, // 接收压缩结果 setCompImg(imagePath){ this.setData({ imagePath // 压缩结果 }) },

至此使用步骤已介绍完毕

小结：

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

到此这篇关于微信小程序开发指南之图片压缩解决方案的文章就介绍到这了,更多相关微信小程序图片压缩内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！

您可能感兴趣的文章:

上一篇：关于element中对el-input 自定义验证规则_vue.js_

下一篇：vue的生命周期钩子与父子组件的生命周期详解_vue.js_

您现在的位置是：网站首页> 编程资料编程资料

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

目录

前言：

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

解决方案：

核心代码展示：

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

小结：

相关内容

点击排行

本栏推荐

猜你喜欢