使用wpaint繪圖軟件時：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderin...

時間 2020-06-07

標籤使用 wpaint 繪圖軟件 uncaught domexception failed execute drawimage canvasrenderin 简体版

原文原文鏈接

使用wpaint繪圖軟件時：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

1、總結

一句話總結：經過刪除法和最簡單模式找錯，發現是style="display: none;"這個位置引起的錯誤

1 <div class="student_note_type_item" id="student_note_type_picture1" style="display: none;">
2  {include file="common/wpaint" /} 3 </div>

一、Uncaught DOMException表示什麼？

Uncaught DOMException代表未獲取dom元素javascript

二、排查錯誤的方法？

刪除法：刪除法刪除代碼以方便找到衝突代碼css

（由於有些狀況下是好的，多了代碼就出錯，哪確定是多的代碼的問題）html

最簡單模式：查看最簡單模式下是否是好的，若是是，逐步增長代碼查找衝突源java

三、使用wpaint繪圖軟件時：Uncaught DOMException出錯的教訓是什麼？

給外部插件加的樣式也頗有多是外部插件出錯的緣由jquery

就是外部插件出錯，不只多是js錯誤，css錯誤也很是常見canvas

2、Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'：

問題：

Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'：The HTMLImageElement provided is in the 'broken' state.dom

分析：

Uncaught DOMException代表未獲取dom元素ide

The HTMLImageElement provided is in the 'broken' state.代表元素在獲取過程當中被中斷了，也即元素可能沒有正確獲取oop

圖片路徑不正確致使圖片未正確獲取也將致使該錯誤性能

代碼：

HTML文件

<!DOCTYPE>
<html>
	<head>
		<mata name="viewport" content="width=device-width,initial-scale=1">
		<script type="text/javascript" src="js/jquery-1.11.0.min.js"></script>
		
	</head>
	<body>
		<div>
			<canvas id="start" width="800" height="600">
			</canvas>
		</div>
		 <img src="./img/girl.jpg" id="img" style="display:none"/>  <!--正確路徑-->
		<script type="text/javascript" src="js/commonFunctions.js"></script>
		<script type="text/javascript" src="js/star.js"></script>
			
	</body>
</html>

start.js:

var can;
var ctx;
var width;
var height;
var imgGirl=new Image();
// $(document).ready(function(){
// 	init();
// })
document.body.onload=init;
function init(){
	can=document.getElementById("start");
	ctx=can.getContext("2d");

	width=can.width;
	height=can.height;
	imgGirl.src="../img/girl.jpg"//注意文件路徑 正確路徑爲：./img/girl.jpg
	gameLoop();
}

function drawBg(){
	ctx.fillStyle="#393550";
	ctx.fillRect(0,0,width,height);
}
/** [gameLoop 刷新畫布] */
function gameLoop(){
	window.requestAnimFrame(gameLoop);
	drawBg();
	drawImg();
}

//根據設備性能進行調用
function drawImg(){
	// star.js:39 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': 
	// The HTMLImageElement provided is in the 'broken' state.
	// 分析：Uncaught DOMException代表未獲取dom元素
	// 		  The HTMLImageElement provided is in the 'broken' state.代表元素在獲取過程當中被中斷了，也即元素可能還在加載中
	ctx.drawImage(imgGirl,100,100)
}

解決辦法：

先判斷圖片路徑在js中是否正確：

在html中添加img標籤，經過js賦值看是否能夠正常顯示，若能夠則路徑正確

參考：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D'： - CSDN博客
https://blog.csdn.net/tjj3027/article/details/78914071

3、使用wpaint繪圖軟件時：Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

經過刪除法和最簡單模式逐步縮小錯誤代碼範圍找錯，發現是style="display: none;"這個位置引起的錯誤

1 <div class="student_note_type_item" id="student_note_type_picture1" style="display: none;"> 2  {include file="common/wpaint" /} 3 </div>

{include file="common/wpaint" /}裏面是wpaint

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。