【微信小程序采坑】用微信Canvas导出的图片到手机上会出现图片模糊问题

特别是分辨率高的手机,图片就越模糊。个问题其实和像素比有关,官方解释:destWidth和destHeight单位是物理像素(pixel),canvas绘制的时候用的是逻辑像素(物理像素=逻辑像素 * density),所以这里如果只是使用canvas中的width和height(逻辑像素)作为输出图片的长宽的话,生成的图片width和height实际上是缩放了到canvas的 1 / density大小了,所以就显得比较模糊了。
粗暴的解决方法:吧导出图片的大小设置为Canvas大小的2到4倍即可。
eg:

23151


wx.canvasToTempFilePath({
      width: 170, //canvas原本的大小
      heght: 170,
      destWidth: 680,  //生成图片的大小设置成canvas大小的四倍
      destHeight: 680,
      canvasId: 'myCanvas',
      fileType: 'png',
      quality: 1,//图片质量
      success: (res) => {
        console.log(1);
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
        });
      },
      fail: function (res) {
        console.log(res);
      },
    }

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值