时间:2021-05-18
微信小程序其实自带一个图片压缩的API wx.compressImage,但是这玩意目前感受就是个垃圾。IOS大多数情况下据说还可以,安卓有的时候降低质量压缩后体积反而变大,而且没办法控制其压缩至具体指定的大小,压缩后多大看天意。所以需要使用画布去自己实现一个图片压缩方法。
简单来讲原理就是:找个不显示在页面上的画布画上去,再取出,如果体积还是太大,缩小尺寸后再画,再取,递归下去,直到体积满足要求。(所以限制的越小,图片越大,压缩越久,递归次数越多)
第一步:新建一个zipPic.js文件(名字你开心就好),里面的代码如下
//通过canvas将图片压缩至指定大小//判断图片大小是否满足需求,limitSize的单位是kbfunction imageSizeIsLessLimitSize(imagePath,limitSize,lessCallback,moreCallback){ //获取文件信息 wx.getFileInfo({ filePath:imagePath, success:(res)=>{ console.log("压缩前图片大小",res.size/1024,'kb'); //如果图片太大了走moreCallback if(res.size>1024*limitSize){ moreCallback() } //图片满足要求了走lessCallback else{ lessCallback() } } })}//将图片画在画布上并获取画好之后的图片的路径function getCanvasImage(canvasId,imagePath,imageW,imageH,getImgSuccess){ //创建画布内容 const ctx=wx.createCanvasContext(canvasId); //图片画上去,imageW和imageH是画上去的尺寸,图像和画布间隔都是0 ctx.drawImage(imagePath,0,0,imageW,imageH); //这里一定要加定时器,给足够的时间去画(所以每次递归最少要耗时200ms,多次递归很耗时!) ctx.draw(false,setTimeout(function(){ wx.canvasToTempFilePath({ canvasId:canvasId, x:0, y:0, width:imageW, height:imageH, quality:1, //最高质量,只通过尺寸放缩去压缩,画的时候都按最高质量来画 success:(res)=>{ getImgSuccess(res.tempFilePath); } }) },200));}//主函数,默认限制大小1024kb即1mb,drawWidth是绘画区域的大小//初始值传入为画布自身的边长(我们这是一个正方形的画布)function getLessLimitSizeImage(canvasId,imagePath,limitSize=1024,drawWidth,callback){ //判断图片尺寸是否满足要求 imageSizeIsLessLimitSize(imagePath,limitSize, (lessRes)=>{ //满足要求走callback,将压缩后的文件路径返回 callback(imagePath); }, (moreRes)=>{ //不满足要求需要压缩的时候 wx.getImageInfo({ src:imagePath, success:(imageInfo)=>{ let maxSide=Math.max(imageInfo.width,imageInfo.height); let windowW=drawWidth; let scale=1; if(maxSide>windowW){ scale=windowW/maxSide; } //trunc是去掉小数 let imageW=Math.trunc(imageInfo.width*scale); let imageH=Math.trunc(imageInfo.height*scale); console.log('调用压缩',imageW,imageH); //图片在规定绘画区域上画并获取新的图片的path getCanvasImage(canvasId,imagePath,imageW,imageH, (pressImgPath)=>{ getLessLimitSizeImage(canvasId,pressImgPath,limitSize,drawWidth*0.95,callback); } ) } }) } )}export default getLessLimitSizeImage好的接下来是使用的方法:
在你想压缩图片的js代码所对应的页面中。先放置一个用户看不见的画布。
(就是如果我想在index.js中chooseImage再压缩,就需要你在index.html中加上下面的html代码)
<!--用于图片压缩的canvas画布,不在页面中展示,且id固定不可变--> <canvas style="width: {{cw}}px; height: {{cw}}px;position: absolute; z-index: -1; left: -10000rpx;; top: -10000rpx;" canvas-id="zipCanvas" ></canvas> <!--画布结束-->其中cw的值我个人建议选择用户屏幕的宽度,如下,在page({…})的data中添加
//画板边长默认是屏幕宽度,正方形画布 cw:wx.getSystemInfoSync().windowWidth,个人建议画布和绘画区域都是正方形的,毕竟你也不知道要压缩的图片是横向的还是纵向的。
然后,引入,不解释
import getLessLimitSizeImage from '../../utils/zipPic'在js代码中:
wx.chooseImage({ count:1, //只传一张 sizeType:'original', //原图质量好,然后通过canvas压缩,缩略图压缩就太糊了 sourceType: ['album', 'camera'], // 来源是相册和相机 success:(res)=>{ let canvasId='zipCanvas' //注意这里的id和你在页面中写的html代码的canvas的id要一致 let imagePath=res.tempFilePaths[0];//原图的路径 let limitSize=2048;//大小限制2048kb let drawWidth=wx.getSystemInfoSync().windowWidth;//初始绘画区域是画布自身的宽度也就是屏幕宽度 wx.showLoading({title:'图片压缩中...',mask:true}) //不需要你可以删掉 getLessLimitSizeImage(canvasId,imagePath,limitSize,drawWidth,(resPath)=>{ wx.hideLoading(); //不需要你可以删掉 //resPath就是压缩后图片的路径,然后想做什么都随你 }) } })补充:
到此这篇关于微信小程序对图片进行canvas压缩的文章就介绍到这了,更多相关微信小程序对图片canvas压缩内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
本文实例为大家分享了微信小程序图片压缩的具体代码,供大家参考,具体内容如下设计思路:选择图片后调用微信压缩图片接口,压缩后接收压缩图片的临时地址,调用微信储存接
源于前段时候微信小程序最初火爆公测时段,把以前用Canvas实现的大转盘抽奖移植成微信小程序,无奈当时小程序对Canvas支持不够完善,只好降低用CSS3实现。
微信小程序解析网页内容详解最近在写一个爬虫,需要将网页进行解析供微信小程序使用。文字和图片解析都好说,小程序也有对应的text和image标签可以呈现。而更复杂
刚开始学微信小程序,有说的不对的地方大家可以提出!首先体验示例小程序在微信中扫描下面的二维码即可体验EChartsDemo:下载为了兼容小程序Canvas,我们
在微信小程序项目中,开发模块涉及到手写签名功能,微信小程序canvas闪亮登场前言微信小程序canvas实现签名功能核心内容简介:(1)签名实现,开始,移动,结