收藏
回答

canvas 2d drawImage报错, 请问是什么原因呢?

组件: canvas type="2d" class="canvas"

API 使用如下:

const query = wx.createSelectorQuery()

wx.getImageInfo({

src:"https://xxx.jpg",

success: function(picRes) {

query.select('.canvas')

  .fields({ node: true, size: true })

  .exec((res) => {

var canvas = res[0].node

var context = canvas.getContext('2d')

context.drawImage(picRes.path, 100, 100, 100, 100)

})

  }

)

}

})

报错如下图 望解答

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

3 个回答

  • L
    L
    2020-09-03

    小程序都这么大体量了,文档都不好好写清楚,真是垃圾

    2020-09-03
    有用 2
    回复
  • Admin ²º²³
    Admin ²º²³
    2020-04-28

    canvas的2d绘图模式的drawImage已经不是这么使用的了。

      <!-- canvas.wxml -->
      <canvas type="2d" id="myCanvas"></canvas>
    <!-- js -->
                const image = canvas.createImage();//创建image       
                image.src = picRes.path;//指定路径为getImageInfo的文件
                image.onload = () => {
                  ctx.drawImage(image, 0, 0, 100, 200)//图片加载完成时draw
                }    
    

    参考文档:

    RenderingContext | 微信开放文档

    https://developers.weixin.qq.com/miniprogram/dev/api/canvas/RenderingContext.html

    官方demo:

    https://developers.weixin.qq.com/s/SHfgCmmq7UcM

    2020-04-28
    有用 1
    回复 3
    • JustFunction
      JustFunction
      2020-07-12
      官方API说明文档,害人不浅
      2020-07-12
      3
      回复
    • 沧海
      沧海
      2020-08-24回复JustFunction
      我也是醉了,我看着 MDN 的 canvas 用法,怀疑自己。结果,还是有部分和 Web 标准不一致,还得用微信这一套整。
      2020-08-24
      1
      回复
    • 锋
      2021-12-17
      害人不浅,毁人不倦
      2021-12-17
      1
      回复
  • Mr.Zhao
    Mr.Zhao
    2020-04-28

    示例代码:https://developers.weixin.qq.com/s/jEgclWmV7VgO

    2020-04-28
    有用
    回复
登录 后发表内容
问题标签