收藏
回答

小程序canvas绘制图片显示不完全

框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
小程序 Bug canvasContext.drawImage 客户端 Android 6.6.7 2.1.1

生成可用于分享的图片时,在三星S6 edge+机型上,存在图片绘制不完全的问题,其他安卓机型以及苹果都正常。


如下是代码片段

···

drawImage (bg, avatar, qrcode, nickname) {

    const ctx = wx.createCanvasContext('myCanvas')

    ctx.setFillStyle('#ffffff')

    ctx.fillRect(0, 0, 750, 1334)

    // 绘制背景

    ctx.drawImage(bg, 0, 0, 750, 1334)

    // 绘制文字

    ctx.setFontSize(30)

    ctx.setFillStyle('#202020')

    ctx.setTextAlign('center')

    ctx.setTextBaseline('top')

    ctx.fillText(nickname, 375, 509)

    ctx.setFillStyle('#606060')

    ctx.setFontSize(36)

    const text = this[this.mode + 'Text']

    ctx.fillText(text[0], 375, 613)

    ctx.fillText(text[1], 375, 683)

    // 绘制小程序码

    // ctx.drawImage(qrcode, 254, 852, 243, 243)

    // 绘制头像

    ctx.save()

    ctx.beginPath()

    ctx.arc(375, 415, 70, 0, 2 * Math.PI)

    ctx.setStrokeStyle('#ffffff')

    ctx.stroke()

    ctx.clip()

    ctx.drawImage(avatar, 305, 345, 140, 140)

    ctx.restore()

    // 提交绘制

    ctx.draw()

}

async canvasToImage () {

    const tempUrl = await wepy.canvasToTempFilePath({

        x: 0,

        y: 0,

        width: 750,

        height: 1334,

        destWidth: 750,

        destHeight: 1334,

        canvasId: 'myCanvas'

    })

    this.tempUrl = tempUrl.tempFilePath

    this.$apply()

}

···

即使只绘制背景图,其他什么都不画也是这样子,不知道大家是否遇到过此类问题

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

9 个回答

  • 李朋
    李朋
    2018-08-28

    楼主解决了吗

    2018-08-28
    有用 1
    回复 7
    • 2018-08-28

      木有,只能设计的时候下边放不太重要的时候,官方的人要了代码片段之后就没下文了。

      2018-08-28
      回复
    • 李朋
      李朋
      2018-08-28

      我这遇到一个和你差不多的问题,我们绘制生成的二维码,有时候会显示空白,背景图绘制都没问题,就是二维码有问题与,不是毕现,网上查了,基本上能改的都改了

      2018-08-28
      回复
    • 2018-08-28回复李朋

      那你应该和我不是一个问题,我们就2K屏底部没绘制(无论图片还是文字,只要在底部区域都是空白的),和二维码没关系,你确认过腾讯返回给你们的二维码是完整的么?倒是我们生成的小程序码有的手机有时候在微信聊天界面长按不会弹出识别小程序码的选项。

      2018-08-28
      回复
    • 李朋
      李朋
      2018-08-28回复

      二维码是完整的,长按无法是别这个我们也遇到过,试了几种方法,解决不了

      2018-08-28
      回复
    • 2018-08-28回复李朋

      你试了什么方法,我们打算把小程序码绘制大一点,不知道会不会好一点

      2018-08-28
      回复
    查看更多(2)
  • 蟹不肉🦀
    蟹不肉🦀
    04-01

    这两天遇到了一个类似的问题,也是canvas绘制的图片在其他机型能正常绘制,但是到了三星的个别机型上就不显示的问题,经过多轮定位最终发现问题出在一个优化策略上

    canvas绘制图片时有些情况下会被压缩变糊,为了解决变糊的问题,很多人会先按照屏幕的设备像素比把画布放大后再缩小,而当放大的比例超过3.75这个临界值的时候,canvas所绘制的图片就不会显示了。

    我看评论区很多人说调低屏幕的分辨率后就正常了,感觉可以往这个方向排查一下,也是奇葩...之前处理过不少因为设备老旧导致的兼容问题,第一次遇到因为设备太好,屏幕像素比太高导致的问题...

    04-01
    有用
    回复
  • 王振宇
    王振宇
    2023-05-18

    我在华为、Vivo、OPPO、红米 都有出现过 canvas图片不显示的问题,有同类问题的同学,请帮忙打call呀

    2023-05-18
    有用
    回复
  • 。。
    。。
    2020-06-24

    请问解决了吗,我的是只在oppo有问题,就底部缺失

    2020-06-24
    有用
    回复 1
    • Zara
      Zara
      2021-09-16
      我的是有些时候 头像会不显示,
      2021-09-16
      回复
  • 雪 嫣
    雪 嫣
    2019-10-18

    楼主解决了吗???

    2019-10-18
    有用
    回复
  • Hao.
    Hao.
    2019-08-20

    请问可以加一下微信吗  有些问题想要请教一下 我绘制的画布 背景图再模拟器上可以显示但是真机预览不能正常显示

    2019-08-20
    有用
    回复
  • 郑诚-手术后在家静养中
    郑诚-手术后在家静养中
    2018-11-21

    案例+1。今天做海报生成的时候用到了 canvas。在Samsung Galaxy Note 5 上真机测试,绘制的图片没有下半部分。检查代码和去各处查找资料均没有结果。(手头没有其他手机,只有这一台)

    把分辨率从 2560x1440 改成了 1280x720 后,再次保存,就是正常的了。


    2018-11-21
    有用
    回复 5
    • 郑诚-手术后在家静养中
      郑诚-手术后在家静养中
      2018-11-21

      补充:Samsung Galaxy Note 5 是2015年的机器。

      另外,1920x1080的也测了。总结: 1280x720:canvas 绘制的图片保存后完美展示。

      1920x1080:只保存了一半多一点

      2560x1440:只保存了一半少一点

      结论:分辨率越高,drawImage 保存后的东西越少。而且是从下往上的越来越少。

      2018-11-21
      回复
    • 2018-11-21回复郑诚-手术后在家静养中

      大半夜还在搞,不会是老板拿刀在后面站着吧

      2018-11-21
      1
      回复
    • 郑诚-手术后在家静养中
      郑诚-手术后在家静养中
      2018-11-22回复

      哈哈

      2018-11-22
      回复
    • 康康
      康康
      2019-04-16回复郑诚-手术后在家静养中

      你好,我们也遇到了这个问题。请问有解决方法吗。总不能要求用户去调整分辨率。

      2019-04-16
      回复
    • 苹果熊
      苹果熊
      2019-07-24回复康康
      因为canvas单位是px,没有做屏幕适配,搜索下小程序canvas适配屏幕的解决方案。
      2019-07-24
      1
      回复
  • 2018-07-04

    我们发现如果把屏幕分辨率从2K调为1080P或720P就不会有这个问题了

    2018-07-04
    有用
    回复
  • 疯狂的小辣椒
    疯狂的小辣椒
    2018-06-28

    你好,麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2018-06-28
    有用
    回复 1
登录 后发表内容