muxi2020
muxi2020
  • 发布:2020-04-10 17:32
  • 更新:2021-06-09 19:04
  • 阅读:4498

【报Bug】canvasToTempFilePath: fail canvas is empty

分类:uni-app

详细问题描述

很急在线等,解决这个问题就可以在小程序上实现一个很方便的功能

重现步骤

[步骤]

按照我提供的代码,点击 “测试” 按钮即可

[结果]

报:canvasToTempFilePath: fail canvas is empty

[期望]

正确执行,获取图片信息

[如果语言难以表述清晰,拍一个视频或截图,有图有真相]

uni-app运行环境说明

[运行端是h5或app或某个小程序?]

微信小程序

[运行端版本号]

微信小程序基础库:2.9.2

[项目是cli创建的还是HBuilderX创建的?如果是cli创建的,请更新到最新版cli再试]

cli 创建

[编译模式说明:自定义组件模式?纯nvue模式?v3模式?]

App运行环境说明

[Android版本号]

[iOS版本号]

[手机型号]

[模拟器型号]

附件

下面代码直接存为一个 .vue 就可以复现了

[可重现代码片段]

<template>  
  <view class="content">  
    <canvas style="width: 200px;height: 200px;border: #007AFF solid 1rpx;"  
            type="2d"  
            canvas-id="myCanvas" id="myCanvas"></canvas>  
    <button @tap="getImage">测试</button>  
  </view>  
</template>  

<script>  

  export default {  
    data() {  
      return {  
        canvas: null,  
        context: null,  
      }  
    },  
    async mounted() {  
      await this.initSize()  

      const ctx = this.context  
      ctx.fillRect(25, 25, 100, 100);  
      ctx.clearRect(45, 45, 60, 60);  
      ctx.strokeRect(50, 50, 50, 50);  

    },  
    methods: {  
      getImage() {  
        uni.canvasToTempFilePath({  
          canvasId: 'myCanvas',  
          fail: eerrr => {  
            debugger  
          },  
          success: res => {  
            // 不能走到这里  
          }  

        })  
      },  
      async initSize() {  
        return Promise.all([  
          new Promise(resolve => {  
            const query = uni.createSelectorQuery().in(this);  
            query.select("#myCanvas")  
              .fields({  
                node: true,  
              }, res => {  
                this.canvas = res.node  
                this.context = this.canvas.getContext("2d")  
                resolve()  
              })  
              .exec()  
          }),  
        ])  
      },  
    }  
  }  

</script>  

<style>  

</style>  

联系方式

[QQ]

2020-04-10 17:32 负责人:无 分享
已邀请:
东东东东

东东东东 - 东东东东

canvasToTempFilePath({},this)这样就可以了

  • 1***@qq.com

    大佬 我传了this也不顶事儿呢 还是fail 脑瓜子疼

    2020-08-19 10:25

  • 东东东东

    回复 1***@qq.com: 你是用的组件吗,具体是怎样的呢

    2020-08-20 14:33

  • 何sir

    我用的也是插件,uni.canvasToTempFilePath(options, this)也没有用,小程序库2.12.2,依然报错canvasToTempFilePath: fail canvas is empty

    2020-09-29 17:49

  • 2***@qq.com

    canvasToTempFilePath({},this)这样就可以了 正解,解决了

    2021-05-13 17:48

muxi2020

muxi2020 (作者)

求大神帮助

  • Azer

    楼主,问题解决了吗?遇到类似问题,求解

    2020-09-02 17:19

muxi2020

muxi2020 (作者)

求救啊,操作都是按文档来的,上面的代码保存成 .vue 就能稳定触发

muxi2020

muxi2020 (作者)

自己顶一下

DCloud_UNI_GSQ

DCloud_UNI_GSQ

试试不用框架,直接原生小程序能否和你预期一致?

7***@qq.com

7***@qq.com

您好请问您的问题解决了吗,遇到了同样的问题,很急很急,马上要解决,麻烦您看到回复我下万分万分感谢

  • 小黑豆

    请问你是自定义的组件么,如果是,需要传入组件实例

    2020-06-11 14:45

  • 东东东东

    canvasToTempFilePath({},this)这样就可以了

    2020-08-12 17:51

TM打野迷了路

TM打野迷了路

应该是 canvasToTempFilePath 不适用于 type="2d" 的情况

LukeDev2K

LukeDev2K - 小程序,app

不支持type="2d”

要回复问题请先登录注册