收藏
回答

canvas 2d 报错 toTempFilePath:fail invalid viewid?

模拟器没问题,真机一直报 toTempFilePath:fail invalid viewid?


业务是当前页面 需要点击进入别的页面填写内容,然后带参数返回 然后画海报保存

当前页面画直接画海报没问题,返回一直报 toTempFilePath:fail invalid viewid?


onReady() {
    this.drawImage()
  },
drawImagefunction () {
    let that = this
    const query = wx.createSelectorQuery()
    query.select('#myCanvas')
      .fields({
        nodetrue,
        sizetrue
      })
      .exec((res) => {
        const canvas = res[0].node
        const canvasRes = res[0]
        const ctx = canvas.getContext('2d')
        const dpr = wx.getSystemInfoSync().pixelRatio
        that.setData({
          canvas ,
          canvasRes,
          ctx,
          dpr
        })
      })
  },
  drawImageDetail() {
    try {
      let userInfo = this.data.userInfo
      let canvasRes = this.data.canvasRes
      let canvas = this.data.canvas
      let dpr = this.data.dpr
      let ctx = this.data.ctx
      let that = this
      canvas.width = canvasRes.width * dpr
      canvas.height = canvasRes.height * dpr
      ctx.scale(dpr, dpr)
      ctx.fillStyle = 'white'
      ctx.fillRect(00, canvas.width, canvas.height)
       ctx.font = '14px DINCondensed-Bold'
      ctx.fillStyle = '#BEC5CC'
      ctx.fillText(`生成海报`00);
         setTimeout(() => {
           
            wx.canvasToTempFilePath({
              canvas: canvas,
              success(res) {
                console.log(res.tempFilePath)
                
               
              },
              fail(res){
                console.log(res)
              }
            })
          }, 400)
      } catch (error) {
        console.log(error)
      }
    },
回答关注问题邀请回答
收藏

9 个回答

  • 瓦力|🇨🇳
    瓦力|🇨🇳
    2022-07-06

    ios离屏canvas, toTempFilePath:fail invalid viewid

    这个解决

    const b64Data = ctx.canvas.toDataURL();

    const time = new Date().getTime();

    const filePath = `${uni.env.USER_DATA_PATH}/temp_image_${time}.png`;

    // base64格式的图片要去除逗号前面的部分才能正确解码

    const buffer = uni.base64ToArrayBuffer(b64Data.substring(b64Data.indexOf(',') + 1));

    // 写入临时文件

    uni.getFileSystemManager().writeFile({

    filePath,

    data: buffer,

    encoding: 'utf8',

    success: res => {

    console.log('保存图片:', res, filePath);

    resolve(filePath);

    },

    fail:(err:any)=>{ resolve(tempFilePaths); }

    });

    2022-07-06
    有用 14
    回复 7
    • 一条鱼
      一条鱼
      2022-12-14
      感谢!
      2022-12-14
      回复
    • Yang
      Yang
      2023-08-13
      解决了
      2023-08-13
      回复
    • 王横
      王横
      2023-08-19
      一年了,这个问题还没修复
      2023-08-19
      回复
    • 琳琳
      琳琳
      2023-08-31
      2023-08-31
      回复
    • 凉白开
      凉白开
      2023-09-18
      这个有长度限制,稍微大点的图片就画不出开,或者只能画的很糊
      2023-09-18
      回复
    查看更多(2)
  • Ray
    Ray
    2021-11-11

    我TM终于解决了这个问题:

    代码问题哈,兄弟们,canvas本身或者他的父级容器,一定不能用wx:if 和 hidden;

    只要你不用,就应该可以解决!想隐藏就是用,absolute定位出外界即可!

    2021-11-11
    有用 2
    回复 4
    • v
      v
      2022-01-12
      经检验cavans外层使用 wx:if  真机会保存失效。 模拟器正常。
      2022-01-12
      回复
    • biubiu
      biubiu
      2022-07-28
      没用,canvas都没父容器和wx:if或hidden也会,隐藏是用fixed
      2022-07-28
      回复
    • 董跃杰
      董跃杰
      2022-08-18
      我也遇到相同问题,请问怎么解决的
      2022-08-18
      回复
    • Ray
      Ray
      2022-08-18回复董跃杰
      我就是按我上面说的方式去解决的,要注意canvas的创建时机。
      2022-08-18
      回复
  • 宁半仙
    宁半仙
    2021-09-01

    请问解决了吗?我也遇到这个问题了

    2021-09-01
    有用 1
    回复 2
    • 大肚腩   、💨
      大肚腩 、💨
      2021-09-17
      +1
      2021-09-17
      回复
    • 董跃杰
      董跃杰
      2022-08-18
      我也遇到相同问题,请问怎么解决的
      2022-08-18
      回复
  • 深海鱼
    深海鱼
    2023-03-07

    都2023了,这问题还存在

    2023-03-07
    有用
    回复 6
    •  
       
      2023-07-24
      +1
      2023-07-24
      回复
    • Yang
      Yang
      2023-08-13
      +1,有解决么
      2023-08-13
      回复
    • NULL
      NULL
      01-19
      2024了
      01-19
      1
      回复
    • 在
      02-22回复NULL
      铁铁 你解决了没
      02-22
      回复
    • NULL
      NULL
      03-04回复
      解决了,才看到,你没解决可以私信
      03-04
      回复
    查看更多(1)
  • biubiu
    biubiu
    2022-08-02

    看你描述是在当前页面画海报没问题,就是去别的页面后返回就会报这个错。我也是相同的问题,进去后直接画没有问题,退出去后再进来就报错了。

    2022-08-02
    有用
    回复 1
    • 董跃杰
      董跃杰
      2022-08-18
      我也遇到相同问题,请问怎么解决的
      2022-08-18
      回复
  • 💤
    💤
    2022-06-08

    2022-06-08
    有用
    回复 3
  • 时里
    时里
    2022-05-29

    解决了嘛。 两年了都~

    2022-05-29
    有用
    回复
  • ゛小云宝へ゛
    ゛小云宝へ゛
    2021-04-27

    请问解决了吗?我就是在刚进来的时候请求并存储了一下这个绘图的路径,如果已经有了就直接显示,否则再去请求绘图,这样做就是想让绘图快点嘛,但是我在两个canvas页面切换的时候就出现这情况了,,,单独一个页面好像没问题,。。。但是模拟器没有问题,就是ios上切换的时候出现的。。。

    2021-04-27
    有用
    回复
  • Riven.
    Riven.
    2021-01-20

    canvas 2d不支持真机调试,可以使用真机预览

    2021-01-20
    有用
    回复 11
    • 2021-01-20
      真机预览时 返回后生成画图也是一样的错误
      2021-01-20
      回复
    • Riven.
      Riven.
      2021-01-20回复
      麻烦提供出现问题的具体机型、微信版本号、系统版本号,以及能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html
      2021-01-20
      回复
    • 2021-01-20回复Riven.
      https://developers.weixin.qq.com/s/ziZs9um27hnk
      2021-01-20
      回复
    • 2021-01-20
      ipx 系统版本14.0微信版本7.0.21 开发工具基础库2.12.0
      2021-01-20
      回复
    • 罗川
      罗川
      2021-04-04回复Riven.
      1 月 20 号的事儿了,三个月过去了,一点跟进进度都没有反馈,这做法太业余了。
      2021-04-04
      1
      回复
    查看更多(6)
登录 后发表内容
问题标签