微信小程序 canvas压缩图片

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、付费专栏及课程。

余额充值