收藏
回答

提示“canvasToTempFilePath: fail canvas is empty”?


<view class="story">
	<canvas hidden="{{radarImg}}" canvas-id="canvas" type="2d" id="canvas" style="width: 100vw; height: calc(100vw / 750 * 1080);"></canvas>
	<image hidden="{{!radarImg}}" src="{{radarImg}}" style="width: 100vw; height: calc(100vw / 750 * 1080);" />
</view>


openDialog: () => {
		console.log('openDialog()');
		let ctx = wx.createCanvasContext('canvas');
		// that.setData({
		// 	radarImg: 'tempFilePath',
		// 	show: true
		// });
		// console.log(that);
		ctx.draw(true, setTimeout(()=>{
			wx.canvasToTempFilePath({
				canvasId: 'canvas',
				success: function(res) {
					console.log(res);
					let tempFilePath = res.tempFilePath;
					that.setData({
						radarImg: tempFilePath,
						show: true
					});
				},
				fail: function(res) {
					console.log(res);
				}
			}, that);
		},500))
	},

that是在全局里定义的,在onload() 里 赋值 that = this;

最后一次编辑于  2020-09-16
回答关注问题邀请回答
收藏

3 个回答

  • Long.
    Long.
    2020-09-17
    drawBg: function({
    		canvas,
    		ctx,
    		width,
    		height
    	} = {}, url) {
    		return new Promise((resolve, reject) => {
    			wx.downloadFile({
    				url: url,
    				success: function(res) {
    					console.log(res);
    					ctx.drawImage(res.tempFilePath, 0, 0, width, height);
    					ctx.draw(true);
    					console.log('drawed bg')
    					resolve();
    				},
    				fail: function(res) {
    					console.log(res);
    					reject();
    				}
    			});
    		});
    	},
    
    2020-09-17
    有用
    回复 1
    • Long.
      Long.
      2020-09-17
      图片下载成功,能在image上显示,但是draw不出来
      2020-09-17
      回复
  • Cjiang
    Cjiang
    2020-09-17

    你好,自行参考代码片段:https://developers.weixin.qq.com/s/w4rKXqm67xkz

    canvas2d的示例请参考官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/canvas/Canvas.html

    

    2020-09-17
    有用
    回复 9
    • Long.
      Long.
      2020-09-17
      图片加载呢,之前用的canvas.createImage()
      2020-09-17
      回复
    • Long.
      Long.
      2020-09-17
      2d canvas示例没有导出图片的代码,可以导出图片吗
      2020-09-17
      回复
    • Long.
      Long.
      2020-09-17
      你那个代码图片印出来是空的啊
      2020-09-17
      回复
    • Long.
      Long.
      2020-09-17
      到底哪一个代码能完整实现?
      2020-09-17
      回复
    • Long.
      Long.
      2020-09-17
      你们这是走过场的?
      2020-09-17
      回复
    查看更多(4)
  • 微盟
    微盟
    2020-09-16

    你的基础库检查一下是不是最新版本库

    2020-09-16
    有用
    回复 2
    • Long.
      Long.
      2020-09-16
      2.12.2
      2020-09-16
      回复
    • Long.
      Long.
      2020-09-17
      代码是没有错吗
      2020-09-17
      回复
登录 后发表内容
问题标签