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

      );

自制组件里得用this    canvasToTempFilePath({},this) 加上this
wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: clipW / ratio,
          height: clipH / ratio,
          destWidth: clipW,
          destHeight: clipH,
          canvasId: 'clip',
          success: (res) => {
          },
          fail: (err) => {
            wx.showToast({ title: '网络错误,请稍后再试' })
          },
        }, this)

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

<template>
	<view style="position: fixed;top:0; left: 100%;" :style="canvasStyle">
		<canvas :style="canvasStyle" canvas-id="confirmBillDetail" ></canvas>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				serial_number: '',
				custom_name: '',
				goodsList: [],
				total_num: 0,
				total_piece: 0,
				userName: '',
				userMobile: '',
				useHeight: 3508,
				billTitle: ''
			}
		},
		computed: {
			// useHeight() {
			// 	return 300 + (this.goodsList.length - 1) * 50
			// },
			canvasStyle() {
				return 'width:2479px; height:' + this.useHeight + 'px;'
			}
		},
		methods: {
			init(option) {
				let param = option
				console.log("param", param)
				this.dataInit(param)
			},
			createPic() {
				console.log('方法执行了')
				let that = this
				let cxt = null;
				let ctx = uni.createCanvasContext('confirmBillDetail', that)
				// uni.createSelectorQuery()
				// 	.select("#confirmBillDetail")
				// 	.context(function(res){
				// 		ctx = res.context
				// 	})
				// 	.exec();
				console.log('cxt',ctx)
				let l0 = 5; 
				let l1 = 30; 
				let l2 = 930; 
				let l3 = 1280; 
				let l4 = 1680; 
				let l5 = 2030; 
				let l6 = 2474; 
				let lc = 600; 
				let t1 = 100; 
				let t2 = 180; 
				let t3 = 280; 
				let t4 = 330; 
				let t5 = 380;
				let t6 = 530;
				ctx.font = "50px sans-serif"
				ctx.fillText(this.billTitle, lc, t1)
				ctx.font = "40px sans-serif"
				
				ctx.fillText('订单编号：' + this.serial_number, l1, t2)
				ctx.fillText('客户名称：' + this.custom_name, l1, t3)
				
					ctx.moveTo(l0, t4)
					ctx.lineTo(l6, t4)	
					ctx.stroke()
					
				ctx.fillText('商品编码/名称', l1, t5)	
				ctx.fillText('主单位', l2, t5)	
				ctx.fillText('主数量', l3, t5)	
				ctx.fillText('辅单位', l4, t5)	
				ctx.fillText('辅数量', l5, t5)	
				console.log('2222')
				this.goodsList.map((item, index) => {
					// ctx.font = "12px sans-serif"
					let list_t = (index * 150 + t6);
					let goods_t1 = list_t - 20, goods_t2 = list_t + 20
					ctx.fillText(item.goods_code, l1, goods_t1) 	
					ctx.fillText(item.goods_name, l1, goods_t2)	
					// ctx.font = "20px sans-serif"
					ctx.fillText(item.goods_unit, l2, list_t)	
					ctx.fillText(item.good_num, l3, list_t)	
					ctx.fillText(item.goods_sale_unit, l4, list_t)	
					ctx.fillText(item.goods_piece, l5, list_t)	
				})
				console.log('3333')
				let goodsLength = this.goodsList.length * 150 + t6 - 85
				
					ctx.moveTo(5, goodsLength)	
					ctx.lineTo(2474, goodsLength)	
					ctx.stroke()
				let t7 = goodsLength + 50;
				let t8 = t7 + 100
				let lt1 = t1 + 160, lt2 = lt1 + 200;
				ctx.fillText('合计：', l1, t7)	
				ctx.fillText('  ', l2, t7)	
				ctx.fillText(this.total_num, l3, t7)	
				ctx.fillText(' ', l4, t7)	
				ctx.fillText(this.total_piece, l5, t7)	


				ctx.fillText('业务员：', l1, t8)	
				ctx.fillText(this.userName, lt1, t8)	
				ctx.fillText(this.userMobile, lt2, t8)	
				// this.useHeight = this.useHeight + goodsLength
				console.log('4444')
				ctx.draw(false, (()=> {
					console.log("this.canvasStyle", this.canvasStyle)
					uni.canvasToTempFilePath({
						canvasId: 'confirmBillDetail',
						destWidth: 2479,
						destHeight: 3508,
						success: function(res) {
							// 在H5平台下，tempFilePath 为 base64
							console.log('生成的路径', res.tempFilePath)
							uni.uploadFile({
								url: that.$url.upload,
								filePath: res.tempFilePath,
								name: 'file',
								header: {
									token: that.$store.state.token,
									version: '10.00.0'
								},
								success: function(res){
									console.log("resshangchuanchenggong", JSON.parse(res.data).url)
									console.log("that.useHeight", that.useHeight)
									that.$emit('detailUrl', {url:JSON.parse(res.data).url, goodsLength: that.goodsList.length})
								},
								fail: function(res) {
									console.log("shangchuanshibai", res)
								}
							})
						},
						fail: function(res) {
							console.log("失败了", res)
						},
						complete: function(res) {
							console.log("res", res)
						}
					}, that)
				})())


			},
			dataInit(e) {
				console.log("初始化待处理数据", e)
				//合同标题
				this.billTitle = e.detailData.custom_name + '客户收货确认函'
				console.log("this.billTitle", this.billTitle)
				//订单编号
				this.serial_number = e.detailData.serial_number
				//客户名称
				this.custom_name = e.detailData.custom_name
				//商品列表
				this.goodsList = e.detailData.goodsList
				//总主数量
				this.total_num = e.detailData.total_number
				this.total_piece=0;
				//总辅数量
				e.detailData.goodsList.map(item => {
					this.total_piece+=+item.goods_piece||0
				})
				//业务员名称
				this.userName = e.detailData.user_name
				//业务员手机号
				this.userMobile = e.detailData.mobile
				
				return this.createPic()
			}
		}
	}
</script>

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

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

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

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

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

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

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

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