微信小程序 canvas压缩图片

该博客介绍了一个JavaScript函数`imgCompress`,用于通过canvas进行图片压缩。此函数接收图片URL数组、canvas ID和当前上下文作为参数,然后根据图片的宽高比例进行缩放,并使用wx.canvasToTempFilePath接口将压缩后的图片转换为临时文件路径。在处理完所有图片后,返回一个包含压缩后图片URL的数组。这个方法适用于前端开发中需要减小图片体积的场景。
摘要由CSDN通过智能技术生成
app.Upload.imgCompress({ 
        'files': [this.data.imgSrc], 
        'canvasId': 'canvas', 
        'that': this
      }).then(res => {
          console.log(res)        // [url,...]
      })
/**
	* canvas 压缩图片
	* @param files         图片url集合
	* @param canvasId      canvas 的 id
	* @param that          this
	*/
imgCompress({ files, canvasId, that }) {
        // <canvas class="canvas" canvas-id="canvas" style="width:{{cWidth}}px;height:{{cHeight}}px;"></canvas>
        return new Promise((resolve, reject) => {
            if(files && Array.isArray(files) && files.length > 0) {
                let promiseList = [];
                files.map((item, index) => {
                    promiseList[index] = new Promise((resolve, reject) =>{
                        wx.getImageInfo({
                            src: item,
                            success: function(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), parseInt(cHeight));//计算出缩放后的宽 高
                                that.setData({ cWidth: cWidth, cHeight: cHeight});//让canvas大小和要缩放的图片大小一致

                                let imageW = cWidth, imageH = cHeight, 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({
                                    fileType:'jpg',
                                    canvasId: canvasId,
                                    x: 0,
                                    y: 0,
                                    width: imageW,
                                    height: imageH,
                               destWidth: imageW,
                               destHeight: imageH,
                                    quality: 1,
                                    success: function (res) {
                                        console.log(res.tempFilePath)
                                        resolve(res.tempFilePath)
                                    },
                                    fail: function (error) {
                                        console.log(error);
                                        reject(error);
                                    }
                                    });
                                }, 200));
                            }
                        })
                    })
                })
                Promise.all(promiseList).then((result) => {
                    resolve(result)
                })
            }else {
                reject('参数错误')
            }
           
        })
    }
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值