国内vps微信小程序图片压缩功能的实现方法
云服务器
国内vps微信小程序图片压缩功能的实现方法
2026-01-21 12:21
国内vps微信小程序图具体操作步骤:
1、通过wx.chooseImage接口选择相机图片。
2、通过wx.getImageInfo接口获取图片信息(长宽,类型)。
3、计算压缩比例和最终图片的长宽。
4、创建canvas绘图上下文,绘制最终图片。
5.通过wx.canvasToTempFilePath接口将画布内容导出为图片并获取图片路径。
代码实现如下所示:
wxml文件
js文件
data:{cWidth:0;cHeight:0;}
data:{cWidth:0;cHeight:0;}
wx.chooseImage({ count:1,//默认9 sizeType:['compressed'],//指定只能为压缩图,首先进行一次默认压缩 sourceType:['album','camera'],//可以指定来源是相册还是相机,默认二者都有 success:function(photo){ //-----返回选定照片的本地文件路径列表,获取照片信息----------- wx.getImageInfo({ src:photo.tempFilePaths[0], success:function(res){ //---------利用canvas压缩图片-------------- varratio=2; varcanvasWidth=res.width//图片原始长宽 varcanvasHeight=res.height while(canvasWidth>400||canvasHeight>400){//保证宽高在400以内 canvasWidth=Math.trunc(res.width/ratio) canvasHeight=Math.trunc(res.height/ratio) ratio++; } that.setData({ cWidth:canvasWidth, cHeight:canvasHeight }) //----------绘制图形并取出图片路径-------------- varctx=wx.createCanvasContext('canvas') ctx.drawImage(res.path,0,0,canvasWidth,canvasHeight) ctx.draw(false,setTimeout(function(){ wx.canvasToTempFilePath({ canvasId:'canvas', destWidth:canvasWidth, destHeight:canvasHeight, success:function(res){ console.log(res.tempFilePath)//最终图片路径 }, fail:function(res){ console.log(res.errMsg) } }) },100))//留一定的时间绘制canvas fail:function(res){ console.log(res.errMsg) }, }) } }) 购买使用一诺网络国内vps,可以极大降低初创企业、中小企业以及个人开发者等用户群体的整体IT使用成本,无需亲自搭建基础设施、简化了运维和管理的日常工作量,使用户能够更专注于自身的业务发展和创新。国内vps低至69元/月,购买链接:https://www.enuoidc.com/vpszq.html?typeid=5