收藏
回答

wx.canvasToTempFilePath报错,怎么解决?

let that = this
let imageInfo = await App.wxp.getImageInfo({
      src: "https://xxx.com/files/sharePoster.jpg"
    });
    console.log("图片信息", imageInfo);
    if (imageInfo.path) {
            // 创建离屏画布
      let canvas = wx.createOffscreenCanvas({
        type'2d',
        width: imageInfo.width,
        height: imageInfo.height
      });
      console.log("canvas", canvas);
      let context = canvas.getContext('2d')
      // 创建海报图片
      const sharePoster = canvas.createImage()
      sharePoster.src = imageInfo.path
      sharePoster.onload = e => {
        // 把图片画到离屏 canvas 上
        context.clearRect(0,0, canvas.width, canvas.height);
        context.drawImage(sharePoster, 00, imageInfo.width, imageInfo.height, 00, imageInfo.width, imageInfo.height);
        let base64 = context.canvas.toDataURL('image/png');
        console.log(base64); //  base64可以正常显示图片
        that.setData({
          src: base64,
          invite: true
        })
        setTimeout(() => {
                    //  报错: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)'
          wx.canvasToTempFilePath({
             canvas: canvas, // canvas type="2d" 时使用该属性
            complete(res) {
            console.log("tempFilePath", res);
            }
          }, that) // 有无this都会报错
        }, 1000);
      }

    }

小程序调用wx.canvasToTempFilePath报错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)

开发者工具版本:稳定版1.05.2204180(windows)

调试基础库版本:2.24.0

最后一次编辑于  2022-04-28
回答关注问题邀请回答
收藏

2 个回答

  • 朱高
    朱高
    2022-05-18

    切换一下基础库就行了。我真是服了,排查了一天,最后发现是基础库问题。

    开始用的是 2.18.1,不管用什么样的姿势,都是报这个错。

    后面换成 2.20.3,好了。

    再切回 2.18.1,又报错。

    可以断定是基础库的问题了。


    2022-05-18
    有用
    回复 2
    • Null
      Null
      2022-05-24
      我用的基础库版本:2.24.0报错,应该是离屏canvas不支持wx.canvasToTempFilePath,我现在解决方案是将canvas转为base64,再将base64写入文件
      2022-05-24
      回复
    • 朱高
      朱高
      2022-05-25回复Null
      我用离屏canvas也报错,后面改用 createSelectorQuery
      2022-05-25
      回复
  • 武曲心
    武曲心
    2022-04-29

    要求一个图片类型,检查一下参数值

    2022-04-29
    有用
    回复 7
    • Null
      Null
      2022-04-29
      有没有fileType这个参数,一样报错。官方文档fileType也不是必选项,
      2022-04-29
      回复
    • 武曲心
      武曲心
      2022-04-29回复Null
      你不会没看懂报错吧?是drawImage要求imageResource参数是图片类型对象,和canvasToTempFilePath的fileType有啥关系
      2022-04-29
      回复
    • Null
      Null
      2022-04-29
      不是这样么?
      2022-04-29
      回复
    • 武曲心
      武曲心
      2022-04-29回复Null
      确定过有值没,打印看一下
      2022-04-29
      回复
    • Null
      Null
      2022-04-29
      传入的image对象是有数据的。
      context.canvas.toDataURL(‘image/png’)转为base64都可以正常显示画布内容。
      2022-04-29
      回复
    查看更多(2)
登录 后发表内容