有同学咨询，在开发APP和小程序时，使用uQRCode来生成二维码，之前用着好好的，功能一切正常，但是突然某个时刻不能用了，生成时报错：

//小程序端错误信息
[渲染层错误] [Component] <canvas>: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. Error: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
at l.methodsHandler [as _invokeCanvasMethod] ([http://127.0.0.1:30752/](http://127.0.0.1:30752/)**pageframe**/**dev**/WAWebview.js?t=wechat&v=3.16.2:1:2146727)(env: Windows,mp,2.01.2510290; lib: 3.16.2)
qrcode.vue:118 {errMsg: "canvasToTempFilePath:fail executeCanvasMethod fail… is a canvas element with a width or height of 0."}(env: Windows,mp,2.01.2510290; lib: 3.16.2)

//APP端错误信息
返回‌‌[object DOMException] at view.umd.min.js:1

这是怎么回事呢？今天丁老师不仅给你修复，还给你分析解答。

首先，看一下这位同学使用uQRCode的生成二维码的代码：

uQRCode.make({
	canvasId:'qrcode',
	componentInstance:this,
	text:'丁老师软件顶呱呱',
	size:360,
	margin:10,
	backgroundColor:'white',
	foregroundColor:'#000000',
	fileType:'jpg',
	correctLevel:uQRCode.errorCorrectLevel.H,
	success:res=>{
		console.log('ok')
	},
	fail:(err)=>{
		uni.hideLoading();
		console.error(err);
	}
});

从代码上看，这个方法是没有任何问题的，丁老师也有亲测复制这个代码进行测试，是可以正常使用的，那么问题到底出在哪里呢？在同样的环境下，代码没有变动过，之前用着好好的，突然不能用了，那就说明，肯定不是这段代码的原因，而是别的地方除了问题。

从代码上看，我们可以看到，这个uQRCode是生成到一个叫qrcode的Canvas对象上，我们见一下这个对象：

<view class="hidden">
	<canvas class="canvas" canvas-id="qrcode" :style="'width:'+qrcode_width+'px;height:'+qrcode_width+'px;'" />
</view>

这个canvas对象本身没有什么问题，但为什么外层多了一个hidden的class，嗯。。检查一下。

.hidden {display:none;}

突然发现，这个.hidden是隐藏的，加了display:none;嗯，问题应该出在这里了，这个canvas被隐藏了，猜测应该是uQRCode找不到对象，所以就生成失败，我们把这个hidden的display:none去掉一下进行测试。

果然，功能恢复正常，uQRCode又可以生成二维码了！原来如比！这个uQRCode关联的Canvas对象，是不能隐藏的啊！你隐藏了，uQRCode就找不到canvas对象，就没法正常生成啊！怪不得你说代码没有动过就不能使用了，因为你没有动过js的代码，但是改了css，影响到功能使用了！

我明白这位同学的意思，他可能想生成二维码做后续使用，所以不想让这个canvas显示出来，但是要记得啊！canvas本身和他的上层，千万不能隐藏，隐藏了就不能用了！如果真想要隐藏，也不要使用display:none的方式，可以使用其他方式来隐藏，即主打一个视觉看不见，但他还存在的方式进行隐藏。

//附：非display:none的隐藏方式
width:0;height:0;opacity:0;position:absolute;z-index:-99;overflow:hidden;