收藏
回答

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

问题模块 框架类型 问题类型 API/组件名称 终端类型 操作系统 微信版本 基础库版本
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()

}

···

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

最后一次编辑于  2018-06-28  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

6 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2018-06-28

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

    2018-06-28
    赞同
    回复 1
    • d x
      d x
      2018-06-28

      wechatide://minicode/w5rxdvms7h5c

      试了好多手机,就三星的有问题


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

    楼主解决了吗

    2018-08-28
    赞同 1
    回复 7
    • d x
      d x
      2018-08-28

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

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

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

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

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

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

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

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

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

      2018-08-28
      回复
    查看更多(2)
  • Quiet and prone
    Quiet and prone
    10-18

    楼主解决了吗???

    10-18
    赞同
    回复
  • 哇晒@
    哇晒@
    08-20

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

    08-20
    赞同
    回复
  • 郑诚(Zheng Cheng)
    郑诚(Zheng Cheng)
    2018-11-21

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

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


    2018-11-21
    赞同
    回复 5
    • 郑诚(Zheng Cheng)
      郑诚(Zheng Cheng)
      2018-11-21

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

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

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

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

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

      2018-11-21
      回复
    • d x
      d x
      2018-11-21回复郑诚(Zheng Cheng)

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

      2018-11-21
      回复
    • 郑诚(Zheng Cheng)
      郑诚(Zheng Cheng)
      2018-11-22回复d x

      哈哈

      2018-11-22
      回复
    • 康康
      康康
      04-16回复郑诚(Zheng Cheng)

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

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

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

    2018-07-04
    赞同
    回复