收藏
回答

Canvas导出图片模糊

问题模块 框架类型 操作系统 操作系统版本 手机型号 微信版本
客户端 小程序 所有 所有 1.02.1802270

你想反馈一个 Bug 还是 提一个需求?


如果是 Bug:

BUG

* Bug 表现是什么?预期表现是什么?

canvas导出的图片模糊了,在模拟器测试正常,到了真机上就出现模糊

* 如何复现?

提升图片清晰度

* 提供一个最简复现 Demo


如果是需求:


* 你希望有什么能力?


* 你需要这个能力的场景是 ?


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

29 个回答

  • 不急
    不急
    2018-03-07

    - 生成的图片要乘屏幕像素比;

    - 画图前获取好路径就不会出现图片消失,

    2018-03-07
    赞同 1
    回复
  • philly
    philly
    2018-03-09

    如果你想画的图是250*150,那你可以画布大小1000*600这样子,画完后直接导出图片去等比缩放展示出来不就不会模糊了吗?你画那么小肯定会有点模糊的,特别是分辨率高的手机

    2018-03-09
    赞同
    回复
  • David
    David
    2018-03-09

    @ Mithrandirヾ 

    兄弟,答应出来的XS,ip7是1,其他手机一般是1.0几,然后绘制图片乘以这个值没有多少改变啊,依然模糊

    相关代码如下,请老铁帮忙看一下

        wx.getSystemInfo({
          success: res => {
     
            console.log(res)
     
            let pixelRatio = res.pixelRatio;
            let ctxW = res.windowWidth;
            let ctxH = res.windowHeight - 80;
            let XS = ctxW / 375;//屏幕系数比,以设计稿375*667(iphone7)为例
     
            this.setData({
              pixelRatio: pixelRatio,
              ctxW: ctxW,
              ctxH: ctxH,
              XS: XS
            });
     
          }
        })
     
    …………
     
    context.drawImage(that.data.posterQrcodeUrl, 90, 720, 180 * XS, 180 * XS);//画二维码

    二位码依然比较模糊,起的作用不大,在社区看到这句话,好像有点作用

    梁天智|Albie 官方

    第二点,destWidth和destHeight单位是物理像素(pixel),canvas绘制的时候用的是逻辑像素(物理像素=逻辑像素 * density),所以这里如果只是使用canvas中的width和height(逻辑像素)作为输出图片的长宽的话,生成的图片width和height实际上是缩放了到canvas的 1 / density大小了,所以就显得比较模糊了。


    所以这里你需要指定真实图片的width和height时,乘于 density就是canvas的大小了。



    2018-03-09
    赞同
    回复
  • 一本正经的胡说八道
    一本正经的胡说八道
    2018-03-07

    好的

    2018-03-07
    赞同
    回复
  • Mithrandirヾ
    Mithrandirヾ
    2018-03-07

    亲测不模糊,差不多算高清的,大字小字都能看清

    2018-03-07
    赞同
    回复
  • 一本正经的胡说八道
    一本正经的胡说八道
    2018-03-07

    适配成功了  导出到手机上会不会模糊

    2018-03-07
    赞同
    回复
  • Mithrandirヾ
    Mithrandirヾ
    2018-03-07

    起作用了,而且两张图是可以切换的,关闭当前就会返回上一个,路径写死了

    2018-03-07
    赞同
    回复
  • 一本正经的胡说八道
    一本正经的胡说八道
    2018-03-07

    ctx.drawImage(this.data.showBgImagePath, ctxW / 2 - 158*XS, 34 * XS, 317 * XS, 361 * XS);

    ctx.drawImage(this.data.dogBgImagePath, 20 * XS, 331 * XS, 61 * XS, 98 * XS);

    同时画两张图片?不会存在图片消失的情况吗?

    2018-03-07
    赞同
    回复
  • 一本正经的胡说八道
    一本正经的胡说八道
    2018-03-07

    // 默认像素比

    let pixelRatio = this.data.pixelRatio;

    // 屏幕系数比,以设计稿375*667(iphone7)为例

    let XS = this.data.windowWidth/375;

    你这个做适配有没有起作用?

    2018-03-07
    赞同
    回复
  • Mithrandirヾ
    Mithrandirヾ
    2018-03-07

    let ctx = wx.createCanvasContext('myCanvas');

    // 画布宽高

    let ctxW = this.data.windowWidth;

    let ctxH = this.data.windowHeight - 80;

    // 默认像素比

    let pixelRatio = this.data.pixelRatio;

    // 屏幕系数比,以设计稿375*667(iphone7)为例

    let XS = this.data.windowWidth/375;


    // 垂直渐变

    const grd = ctx.createLinearGradient(0, 0, 0, ctxH);

    grd.addColorStop(0, '#0E128D');

    grd.addColorStop(1, '#080E3A');

    ctx.setFillStyle(grd);


    ctx.fillRect(0, 0, ctxW, ctxH);


    ctx.drawImage(this.data.showBgImagePath, ctxW / 2 - 158*XS, 34 * XS, 317 * XS, 361 * XS);

    ctx.drawImage(this.data.dogBgImagePath, 20 * XS, 331 * XS, 61 * XS, 98 * XS);


    ctx.setFontSize(18 * XS);

    ctx.setFillStyle('#F7F7FA');

    ctx.setTextAlign('center');

    ctx.setTextBaseline('middle');

    ctx.fillText(this.data.name, ctxW / 2, 58 * XS);


    ctx.setTextAlign('center');

    ctx.setTextBaseline('middle');

    ctx.setFontSize(35 * XS);

    ctx.setFillStyle('#232884');

    this.fontLineFeed(ctx, this.data.title, 1, 38 * XS, ctxW / 2, 120 * XS);


    ctx.setTextAlign('center');

    ctx.setTextBaseline('middle');

    ctx.setFontSize(14);

    ctx.setFillStyle('#FF72A5');

    this.fontLineFeed(ctx, this.data.desc, 18 * XS, 20 * XS, 200 * XS, 330 * XS);



    你看这段代码你能看懂吗

    2018-03-07
    赞同
    回复

正在加载...

登录 后发表内容