收藏
回答

canvasToTempFilePath: fail canvas is empty"

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug wx.canvasToTempFilePath canvas 微信安卓客户端 6.5.3 2.0.0

data: {

// 图标数据

doubleColumnCanvasData: {

canvasId: 'doubleColumn',

},

doubleColumnTitle: "近半年已获得认可",

doubleColumnUnit: [{

color: "#94df87",

title: "认可我的"

},

{

color: "#81bdfd",

title: "认可币数"

}

],

// 图标数据

corpId: '',

authCode: '',

userId: '',

// 悬赏点击按钮的参考值

tankk: 1,

// 点击页面切换

qiehuan: 1,

// 弹出框

qqt: '',

// 轮播图配置

imgUrls: [],

indicatorDots: true,

autoplay: true,

interval: 2000,

duration: 1000,

// 轮播图配置

user:'',

ownBadge: 0,

ownCoin: 0,

ownPoint: 0,

starUsers: [],

stDatas: '',

notices: [],

sessionId:''

},


/**

  * 组件的方法列表

  */

methods: {

// 图表转图片

zhuantu(){

setTimeout(function () {

wx.canvasToTempFilePath({

canvasId: 'doubleColumn',

success: function (res) {

var tempFilePath = res.tempFilePath;

console.log(tempFilePath);

},

fail: function (res) {

console.log(res);

}

});

}, 500);


},

onload直接调用的

页面图表显示正常就转不了图片

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

9 个回答

  • 风定奏
    风定奏
    2020-11-10

    canvasToTempFilePath: fail canvas is empty

    文档:canvas 文档说canvas 组件的唯一标识符,若指定了 type 则无需再指定该属性canvas-id

    心得:所以把type属性去掉,保留canvas-id就可以获取到canvas

    实例:<canvas  style="width:300px;height:300px;border:1px solid red;"  canvas-id="myCanvas"></canvas>

    效果:可以获取到

    代码: wx.canvasToTempFilePath(

            {

              x: 0,

              y: 0,

              width: 300,

              height: 300,

              destWidth: 100,

              destHeight: 100,

              canvasId: "myCanvas",

              success: res => {

                console.log("wx.canvasToTempFilePath-----res:", res);

                console.log(res.tempFilePath);

              },

              fail: res => {

                console.log("wx.canvasToTempFilePath-----res:", res);

              }

            },

            this

          );

    2020-11-10
    有用 1
    回复
  • YC
    YC
    2020-01-20
    自制组件里得用this    canvasToTempFilePath({},this) 加上this
    wx.canvasToTempFilePath({
              x0,
              y0,
              width: clipW / ratio,
              height: clipH / ratio,
              destWidth: clipW,
              destHeight: clipH,
              canvasId'clip',
              success(res) => {
              },
              fail(err) => {
                wx.showToast({ title'网络错误,请稍后再试' })
              },
            }, this)
    
    2020-01-20
    有用 1
    回复 7
    • MagxL
      MagxL
      2020-01-25
      有用有用,这块,this是经验盲区
      2020-01-25
      回复
    • 偷停寂寞
      偷停寂寞
      2020-02-19
      具体 怎么用呢?可以贴代码出来看看吗?
      2020-02-19
      回复
    • Fi.fi..🍥🍬🍡
      Fi.fi..🍥🍬🍡
      2020-03-25
      加上this了没用啊,还是报错啊
      2020-03-25
      回复
    • YC
      YC
      2020-03-26回复偷停寂寞
      不要看我的参数。。只看this加的位置。是可以的
      2020-03-26
      回复
    • YC
      YC
      2020-03-26回复Fi.fi..🍥🍬🍡
      那应该是其他问题了吧。。我加了可以。你再排查排查。。
      2020-03-26
      回复
    查看更多(2)
  • 嘉禾生
    嘉禾生
    2020-03-25

    @官方,我用的Taro框架,使用了async/await,不可能移除的,什么时候解决这个bug

    2020-03-25
    有用
    回复
  • ccs
    ccs
    2020-03-22

    我也遇到这个问题, 怎么办要失业了!@腾讯

    2020-03-22
    有用
    回复
  • 天心
    天心
    2020-03-07

    刚解决这个问题。在所有其他代码都检查无误之后,最终定位到是因为使用了api promise化,也就是使用了下面这些代码:

    import {
        promisifyAll,
        promisify
    } from 'miniprogram-api-promise';
    const wxp = {}
    promisifyAll(wx, wxp)
    

    将上面代码注释掉就好了。有问题的同学可以检查下是否是这个原因。

    2020-03-07
    有用
    回复 4
    • 左右对称
      左右对称
      2020-03-17
      我这边也是因为api promise化 但我又必须要用到这个 不能注释掉怎么办
      2020-03-17
      回复
    • 天心
      天心
      2020-03-18回复左右对称
      这是全部api方法promise化之后,wx.wx.canvasToTempFilePath()方法出现了bug。所以我后面是对单独需要promise化的方法单独使用promisify,而不是promisifyAll。
      2020-03-18
      回复
    • 左右对称
      左右对称
      2020-03-19回复天心
      好的,谢谢你,问题已经解决了
      2020-03-19
      回复
    • sGuang
      sGuang
      2020-12-14
      解决了,谢谢啊,  promise单独再封一次没问题了 return new Promise((resolve, reject) => {
              wx.canvasToTempFilePath({
                canvasId: ‘id’,
                success(res) {
                  resolve(res)
                },
                fail(err) {
                  reject(err)
                },
              }, this)
            })
      2020-12-14
      回复
  • 张佳乐
    张佳乐
    2019-12-06

    遇到同样的问题了,onReady里用canvas画图,然后调用也会报这个错误。

    2019-12-06
    有用
    回复 14
    • 九里
      九里
      2019-12-06
      你的图能出来吗
      2019-12-06
      回复
    • 九里
      九里
      2019-12-06
      canvas 引用wxcharts表格 能在组件页面里显示出来吗?
      2019-12-06
      回复
    • 九里
      九里
      2019-12-06回复张佳乐
      这是问题的代码片段  我想引用wxcharts表格引用的图表显示出来 麻烦能帮我看一下吗  https://developers.weixin.qq.com/s/MWeM0omL7Gdf
      2019-12-06
      回复
    • 九里
      九里
      2019-12-06
      在page1 组件页面里显示出来
      2019-12-06
      回复
    • 九里
      九里
      2019-12-06回复张佳乐
      ?大佬 能把你实现后的代码片段发我一下吗 感谢
      2019-12-06
      回复
    查看更多(9)
  • 你喜欢沉默而我姓李
    你喜欢沉默而我姓李
    2019-12-05

    我也是这个问题 , 页面也展示出来了 就是报错

    2019-12-05
    有用
    回复 1
    • 季风吹向大海
      季风吹向大海
      2020-04-20
      麻烦问一下,问题解决了吗,我也遇到这个问题了,而且加了this也没有用
      2020-04-20
      回复
  • 九里
    九里
    2019-12-03

    链接: https://pan.baidu.com/s/1EJ_gjgGLjj7gyXBXgroOOw 提取码: tj2k  这是完整的 问题抽出来看 麻烦看一下

    2019-12-03
    有用
    回复
  • 社区技术运营专员-小柿子
    社区技术运营专员-小柿子
    2019-11-28

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

    2019-11-28
    有用
    回复 10
    查看更多(5)
登录 后发表内容
问题标签