收藏
回答

canvastotempfilepath 生成图片模糊?

上面这张图是canvas , 下面是生成出来的。下面这张图很模糊。

  setTimeout(() => {

       this.cancelChooes();

       const systemInfo = wx.getSystemInfoSync();

       let pixelRatio = systemInfo.pixelRatio;

       console.log("设备像素比--->" + this.screenWidth);

       console.log("设备像素比2--->" + pixelRatio);

       this.draw(this.localImg).then(() => {

         wx.canvasToTempFilePath({

           x: 0,

           y: 0,

           width: this.screenWidth,

           height: this.screenWidth,

           destWidth: this.screenWidth * pixelRatio,

           destHeight: this.screenWidth * pixelRatio,

           canvasId: "canvas",

           fileType: "jpg",

           quality: 1,

           success: async res => {

             let img = await uploadImg(res.tempFilePath);

             this.previewImg = img;

             console.log("导出图片:" + img);

           }

         });

       });

       wx.hideLoading();

     }, 1000);



回答关注问题邀请回答
收藏

6 个回答

  • 小程序技术专员-binnie
    小程序技术专员-binnie
    2019-09-16

    如果图片模糊的话可以把输出宽高设为2倍试试

    2019-09-16
    有用 2
    回复 1
    • 禾店科技
      禾店科技
      2021-05-07
      如果 canvas 绘制的时候是按照低像素密度绘制的,仅导出的时候设置 destWidth destHeight 乘以 pixelRatio,输出的图片虽然变大了,但还是会模糊。
      我解决的办法是:绘制的时候就把所有的尺寸(字体大小、图片大小、边距、间距等)乘以 pixelRatio,输出图片的时候就按照绘制大小输出就可以。
      2021-05-07
      回复
  • 十一
    十一
    2021-09-09

    我把destWidth和destHeight注释了之后,图片就清晰了。

    2021-09-09
    有用 3
    回复 2
    • Seororo
      Seororo
      2021-10-26
      woc!真的!牛逼
      2021-10-26
      回复
    • Eita
      Eita
      2022-07-28
      还是大哥牛逼!
      2022-07-28
      回复
  • 禾店科技
    禾店科技
    2021-05-07

    如果 canvas 绘制的时候是按照低像素密度绘制的,仅导出的时候设置 destWidth destHeight 乘以 pixelRatio,输出的图片虽然变大了,但还是会模糊。

    我解决的办法是:绘制的时候就把所有的尺寸(字体大小、图片大小、边距、间距等)乘以 pixelRatio,输出图片的时候就按照绘制大小输出就可以。


    2021-05-07
    有用 1
    回复
  • 蜂蜜小猪🐷
    蜂蜜小猪🐷
    2021-01-12

    有大佬看看我的问题吗,canvastotempfilepath 有几率生成空图


    2021-01-12
    有用
    回复
  • zzzzz
    zzzzz
    2020-01-08

    即便输出和原图宽高一致,图片的大小几乎和原图一样,可是根本没用。因为图片的dpi被修改了,原图的dip是300,canvas导出的图片dpi是96。怎么可能清晰呢?不明白这个dpi修改的机制和原理是啥?有懂得人给科普下呗。。。

    2020-01-08
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2019-09-10

    你好,麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-09-10
    有用
    回复 2
    • 佟子青
      佟子青
      2019-09-10

      代码片段https://developers.weixin.qq.com/s/hgwFJhmR7Vbb    (所有机型,所有版本)华为荣耀8X   版本号7.0.6

      2019-09-10
      回复
    • 八瓣格桑
      八瓣格桑
      2019-09-11
      7.0.6 Redmi K20p 也同样模糊
      2019-09-11
      回复
登录 后发表内容
问题标签