收藏
回答

wx.canvasToTempFilePath报错,提示image格式错误?

基础库版本:2.16.1


报错内容:

VM1309 WAService.js:2 TypeError: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

代码段:

// 创建离屏 2D canvas 实例

    const canvas = wx.createOffscreenCanvas({type: '2d', width: 300, height: 150})

    // 获取 context。注意这里必须要与创建时的 type 一致

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


    // 创建一个图片

    const image = canvas.createImage()

    // 等待图片加载

    await new Promise(resolve => {

      image.onload = resolve

      image.src = 'http://1812.img.pp.sohu.com.cn/images/blog/2009/11/18/18/8/125b6560a6ag214.jpg' // 要加载的图片 url

    })


    // 把图片画到离屏 canvas 上

    context.clearRect(0, 0, 300, 150)

    context.drawImage(image, 0, 0, 300, 150)

    wx.canvasToTempFilePath({

      canvas: canvas,

      quality: 1,

      success: (res) => {

        let filePath = res.tempFilePath; //获取图片地址

        console.log("filePath:",filePath)

      }

    }, this)

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

2 个回答

  • zhengui😄
    zhengui😄
    2021-05-28

    离屏画布的方法好像还不是很好用,还是用wx.createSelectorQuery()解决了,只需要把画布组件置于屏幕外就行了

    <canvas
      type="2d"
      id="canvas"
      style="width:400px; height:400px;position:fixed;left:100%;"
    ></canvas>
    
    2021-05-28
    有用 1
    回复
  • Cjiang
    Cjiang
    2021-05-24

    请具体描述问题出现的流程,并提供能复现问题的简单代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)。

    2021-05-24
    有用
    回复 9
    • zhengui😄
      zhengui😄
      2021-05-24
      https://developers.weixin.qq.com/s/UMmilxmD7Oql
      2021-05-24
      回复
    • Cjiang
      Cjiang
      2021-05-24回复zhengui😄
      进去就报错,请先自查下。
      2021-05-24
      回复
    • zhengui😄
      zhengui😄
      2021-05-24
      wx.createOffscreenCanvas创建离屏画布,并且context.drawImage之后,怎么把画布内容导出成图片?
      开发文档说调用wx.canvasToTempFilePath,在draw()的回调函数中,但是createOffscreenCanvas之后调用不到draw()方法
      2021-05-24
      2
      回复
    • zhengui😄
      zhengui😄
      2021-05-24
      这两个接口,如何整合起来
      2021-05-24
      回复
    • Camp Nou
      Camp Nou
      2021-07-23回复Cjiang
      官方大大看看我的提问
      2021-07-23
      回复
    查看更多(4)
登录 后发表内容