Canvas导出图片模糊
发布于 6 年前 作者 yangtian 6432 次浏览 来自 问答

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

如果是 Bug：

BUG

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

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

* 如何复现？

提升图片清晰度

* 提供一个最简复现 Demo

如果是需求：

* 你希望有什么能力？

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

10 回复

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

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

  • 生成的图片要乘屏幕像素比；

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

@ 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的大小了。


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

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);

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

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

// 默认像素比

let pixelRatio = this.data.pixelRatio;

// 屏幕系数比，以设计稿375*667（iphone7）为例

let XS = this.data.windowWidth/375;

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

好的

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);

你看这段代码你能看懂吗

回到顶部