微信小程序用canvasToTempFilePath压缩图片，开发工具压缩正常而真机上比例失调

一.序言：

上传图片时有些图片太大了，需要压缩质量大小再上传。下面展示压缩质量大小上传，也是我踩过得坑：开发工具上压缩正常而在真机上比例失调。主要是用 wx.canvasToTempFilePath 方法。

我是要实现一个上传4张图片的功能：

二.实现：

用于处理压缩图片的canvas

  <!-- 用于处理压缩图片的canvas --><canvas canvas-id="attendCanvasId1" style="width:{{canvasWidth1}}px;height:{{canvasHeight1}}px;position: absolute;left:-8000px;top:-8000px;" /><canvas canvas-id="attendCanvasId2" style="width:{{canvasWidth2}}px;height:{{canvasHeight2}}px;position: absolute;left:-8000px;top:-8000px;" /><canvas canvas-id="attendCanvasId3" style="width:{{canvasWidth3}}px;height:{{canvasHeight3}}px;position: absolute;left:-8000px;top:-8000px;" /><canvas canvas-id="attendCanvasId4" style="width:{{canvasWidth4}}px;height:{{canvasHeight4}}px;position: absolute;left:-8000px;top:-8000px;" /><!-- <canvas canvas-id="attendCanvasId" style="width:{{canvasWidth}}px;height:{{canvasHeight}}px;" /> -->

data里定义变量：

    // canvas 相关（为了支持多选需要四个canvas） canvasWidth1: '579',canvasWidth2: '579',canvasWidth3: '579',canvasWidth4: '579',canvasHeight1: '807',canvasHeight2: '807',canvasHeight3: '807',canvasHeight4: '807',

省略…上面这些都不是重点，跳过，下面是封装的压缩质量方法：

踩坑：开发工具上压缩上传没问题，但是真机上图片会出现只截取了一部分，比例失常现象。

原因：wx.canvasToTempFilePath的时候忘记用定时器，在开发工具正常是因为canvas绘制速度快所以没问题，而真机上绘制慢导致获取到的图片不正常。

  /**图片压缩*  压缩图片的尺寸、大小* @param {*} img  选择图片 图片对象  ； index：因为我4张图片，所以用index区分* @param {*} width 默认600px 最小压缩宽度，当图片小于这个宽度的时候不压缩尺寸，只压缩质量 质量0.5倍* @param {*} size   单位kb  最小压缩大小，当图片小于这个大小的时候不压缩质量*  当某张图片，小于size不做操作*/picCompress(img, index, width = 600, size = 1024) {const canvasId = 'attendCanvasId' + index// canvas长度高度属性名const widthName = 'canvasWidth' + indexconst heightName = 'canvasHeight' + indexlet that = thislet imgSize = img.size / 1024console.log('img', img)let path = img.urlconsole.log('图片大小(kb)', imgSize);return new Promise((resolve, reject) => {wx.getSystemInfo({success: function (data) {var pixelRatio = data.pixelRatio;wx.getImageInfo({src: path,success: function (res) {//  这里除于设备像素比 var  canvasWidth = res.width / pixelRatio ;var canvasHeight = res.height / pixelRatio ;  //设置canvas尺寸that.setData({  [widthName]: canvasWidth,[heightName]: canvasHeight});var ctx = wx.createCanvasContext(canvasId);ctx.drawImage(path, 0, 0, canvasWidth, canvasHeight);ctx.draw(true, function () { if (imgSize > size){//保存临时文件setTimeout(() => {wx.canvasToTempFilePath({ canvasId, fileType: 'jpg',quality: 0.5,width: 0,height: 0,  destWidth: canvasWidth, destHeight: canvasHeight, success: function (res) {console.log(res.tempFilePath)wx.getImageInfo({src: res.tempFilePath,success: function (res) {//压缩成功,res.path是临时路径 我转成base64后上传console.log(res)let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')console.log('------------url:',res.path) resolve(sourcePhoto)}});},fail: function (error) {console.log(error)}})}, 500)}else{let sourcePhoto = wx.getFileSystemManager().readFileSync(res.path, 'base64')console.log('------------url:',res.path) resolve(sourcePhoto)}})}})}});})},

wx.canvasToTempFilePath属性：

三.总结：

微信小程序用canvasToTempFilePath压缩图片，开发工具压缩正常而真机上比例失调相关推荐

微信小程序_1,基础配置及其开发工具
如果你想找某一内容,请ctrl+f,全文搜索小程序与普通网页开发的区别: 获取小程序的AppID 微信开发者工具 1.快速创建小程序项目 2.代码的查看和编辑 3.对小程序功能进行调试 4.小程序的 ...
学习微信小程序的第一天——认识开发工具的各个组件
学习致谢:https://www.bilibili.com/video/BV1834y1676P?p=8&vd_source=eea46c4b2d8e22202f61369ffd3e079d ...
微信小程序开发文档和开发工具放出破解版-亲测可用
废话不多说,直接上衔接 1,微信小程序开发文档现阶段最全的开发文档了 http://wxopen.notedown.cn/api/notice.html 2,开发工具 https://github. ...
微信小程序（应用号）开发工具+破解+Demo+教程
一.介绍 9月21号,传言已久的微信应用号正式以"微信公众号平台小程序"的名义发布,依然采取了内测制度,目前只有少部分开发者可使用."微信之父"小龙哥在朋友圈介 ...
微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器(nodejs版)接收
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid - 后端为nodejs 代码封装是在上文添加的. ...
微信小程录制视频上传服务器,微信小程序-从相册获取图片,视频使用相机拍照,录像上传+服务器nodejs版接收-微信小程序视频上传功能-微信小程序视频上传...
在本文微信小程序-从相册获取图片使用相机拍照本地图片上传之前需要看看微信小程序-获取用户session_key,openid,unionid-后端为nodejs代码封装是在上文添加的.本文知识点:1. ...
微信小程序拍照视频上传php,微信小程序-拍照或选择图片并上传文件
微信小程序-拍照或选择图片并上传文件调用拍照API:https://mp.weixin.qq.com/debug/wxadoc/dev/api/media-picture.html?t=201612 ...
[微信小程序]聊天对话(文本,图片)的功能(完整代码附效果图)
相关文章: 1.小程序聊天群,发送语音,文字,图片. 2.微信小程序集成腾讯IM,实现实时音视频通话,1V1聊天 3.云开发微信小程序聊天群 4.接入网易云信IM即时通讯的微信小程序聊天室 5.微信小 ...
微信小程序系列——点击图片放大预览
需求开发的时候,把图片放到页面上,点击图片没有任何反应,不能放大也不能缩小这怎么能行!!! 所以需求来了:点击图片能够把图片弹出来,这样就能放大图片看细节了! 实现步骤微信提供了预览图片的接口, ...

微信小程序用canvasToTempFilePath压缩图片，开发工具压缩正常而真机上比例失调

一.序言：

二.实现：

三.总结：

微信小程序用canvasToTempFilePath压缩图片，开发工具压缩正常而真机上比例失调相关推荐

最新文章

热门文章