微信小程序之画布(canvas)转化出来的图片模糊问题

时间:2019-09-23
本文章向大家介绍微信小程序之画布(canvas)转化出来的图片模糊问题,主要包括微信小程序之画布(canvas)转化出来的图片模糊问题使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

将canvas大小设为(1200*800),使用css将canvas缩放到适应屏幕大小。

这在开发工具的模拟器中是没有问题的,然而在真机测试的时候是无效的,不管用的是transform还是zoom。

本质上就是生成一个更大的图片,因为手机的屏幕设备的像素比现在一般都是超过2的。实际上我们只需要在使用wx.canvasToTempFilePath的时候,设置参数destWidth和destHeight(输出的宽度和高度)为width和height的2倍以上即可。

context.draw(true, setTimeout(function() {
      //将生成好的图片保存到本地,需要延迟一会,绘制期间耗时
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: 670,
        height: 959,
        destWidth: 2010,
        destHeight: 2877,
        canvasId: 'mycanvas',
        success: function(res) {
          var tempFilePath = res.tempFilePath;
          that.setData({
            imagePath: tempFilePath,
            canvasHidden: true
          });
        },
        fail: function(res) {
          console.log(res);
        }
      });
    }, 200));

原文地址:https://www.cnblogs.com/jessie-xian/p/11571639.html