收藏
回答

canvas 类型为2d时,使用CanvasContext.drawImage与预期的结果不符?

原本使用 var context = wx.createCanvasContext('firstCanvas') 这种方式来使用canvas,并且制作成分享图,得到的图片没有问题。后来优化成使用 2d 的方式来制作图片,ctx.drawImage 画出的图片却有问题

期望的结果:

得到的结果:

参数都是一样的,只是原先用的是图片本地路径,2d 用的是一个image, canvas的宽高为375*667:

ctx.drawImage(path, 0, 0, 375, 375)

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

2 个回答

  • HXP
    HXP
    2020-04-20

    设置dpr也没解决我的问题

    动态给canvas赋值 宽高时再获取canvasContext, 并导出临时图片,可利用image标签装图片

      onReady: function () {
        const query = wx.createSelectorQuery()
        query.select('#resize')
          .fields({ node: true, size: true })
          .exec((res) => {
            this.canvas = res[0].node
          })
      },
      this.setData({
            width,
            height
          }, function () {
            canvas.width = width
            canvas.height = height    
            let canvasContext = this.canvas.getContext('2d')
      })
    
    2020-04-20
    有用
    回复 4
    • yy
      yy
      2020-08-13
      使用2d画板的话,不要用临时路径,直接把canvas放在画面上展示。
      遇到drawImage,坐标、大小、模糊等问题,多半是没有给canvas根据dpr缩放
      2020-08-13
      回复
    • āáǎà
      āáǎà
      2020-08-17
      兄弟,请教一下,不用临时路径,那直接用本地/网络图片也绘制不出来,直接就是空白的,这个是什么原因造成的呢,脑阔疼
      2020-08-17
      回复
    • 2020-08-26回复āáǎà
      你解决了吗
      2020-08-26
      回复
    • āáǎà
      āáǎà
      2020-09-07回复
      没解决,放弃了,用原来旧的api
      2020-09-07
      回复
  • 是小白啊
    是小白啊
    2020-02-19

    麻烦提供能复现问题的代码片段https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2020-02-19
    有用
    回复 18
    查看更多(13)
登录 后发表内容
问题标签