微信小程序等比例缩小图片(用于图片内容合规验证尺寸不能超过750*1334)
2023-09-11 14:19:38 时间
背景:在做一个用户上传图片(发布随笔),但是微信需要对图片进行验黄等检测,并规定图片尺寸在750*1334,所以要对图片进行等比例缩放。
(本来写在后端合适,1.是后端懒,2.后端些了一个,有时候图片尺寸大了,报内存不足,所以最后写在了小程序端)
https://mp.weixin.qq.com/cgi-bin/announce?action=getannouncement&key=11522142966rk3L2&version=1&lang=zh_CN&platform=2
这个写在 wx.chooseImage 里面
//let that = this;//在外部定义 //打印未处理的图片信息 wx.getFileInfo({ filePath: file.path, success: function (res) { console.log(res); } }) //-----压缩图片开始 (像素不超过750*1334) wx.getImageInfo({ src: file.path, success: function (res) { console.log(res); let cW = res.width, cH = res.height; let cWidth = cW,cHeight= cH; if ((cW / cH)<0.56){ //说明 要依高为缩放比例--0.56是 750/1334的结果 if (cH>1334){ cHeight = 1334; cWidth = (cW * 1334) / cH; } } else {//要依宽为缩放比例 if (cW > 750) { cWidth = 750; cHeight = (cH * 750) / cW; } } console.log(parseInt(cWidth));//计算出缩放后的宽 console.log(parseInt(cHeight));//计算出缩放后的高 that.setData({ cWidth: cWidth, cHeight: cHeight});//让canvas大小和要缩放的图片大小一致 let imageW = cWidth, imageH = cHeight, canvasId = "canvas", imagePath = res.path; const ctx = wx.createCanvasContext(canvasId); ctx.drawImage(imagePath, 0, 0, cW, cH, 0, 0, imageW, imageH); ctx.draw(false, setTimeout(function () { // 一定要加定时器,因为ctx.draw()应用到canvas是有个时间的 wx.canvasToTempFilePath({ canvasId: canvasId, x: 0, y: 0, width: imageW, height: imageH,
destWidth: imageW,
destHeight: imageH,
quality: 1, success: function (res) { console.log(res); //打印处理后的图片信息 wx.getFileInfo({ filePath: res.tempFilePath, success: function (res) { console.log(res); } }) }, }); }, 200)); } }); //-----压缩图片结束
wxml 中要加
<canvas class="canvas" canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px;"></canvas>
可以加些样式隐藏
visibility: hidden;position:absolute;z-index:-1; left:-10000rpx;top:-10000rpx;
一个等比缩放的效果:
参考 :
https://www.cnblogs.com/jonyellow/p/11727776.html
https://github.com/jonyellow/code-diary/
相关文章
- 初学微信小程序 TodoList
- 微信小程序登录鉴权流程图
- 微信小程序 MinUI 组件库系列之 price 价格组件
- 【wepy入门教程】48小时开发看美女微信小程序,万花阁
- 安卓手机怎么把备忘录里的东西发到微信好友
- 微信小程序-自定义下拉刷新
- vue.js3:分享到微信好友/朋友圈(卡片形式/图片文字形式)(vue@3.2.33 / weixin-js-sdk@1.6.0)
- EasyNVR结合阿里云/腾讯云CDN实现微信/小程序直播的方案
- 微信小程序中同步 异步的使用
- signalr 应用于微信小程序(二)
- 【转载】微信小程序-开发入门(一)
- uni-app:微信小程序:预加载字体文件(hbuilderx 3.7.3)
- 微信小程序----相对路径图片不显示
- 微信小程序----自定义加载图标
- 前端面试题:商城项目中有写到调用微信,支付宝支付,简单讲述一下这个支付与后台对接的过程,微信支付的原理
- 微信小程序开发系列一:微信小程序的申请和开发环境的搭建
- 微信小程序UI框架有哪些?
- uniapp微信小程序如何动态设置图片的高度和宽度
- 实时视频直播客户端技术盘点:Native、HTML5、WebRTC、微信小程序
- 【小程序】微信小程序基础语法讲解(一)
- 微信小程序——标签wxml、样式wxss、js、json
- WordPress-微信机器人高级版
- 【taro react】---- 兼容微信小程序和H5的海报绘制插件
- AlertManager实现企业微信报警(十三)