使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.

摘要:
给外部插件加的样式也很有可能是外部插件出错的原因就是外部插件出错,不仅可能是js错误,css错误也非常常见二、UncaughtDOMException:Failedtoexecute'drawImage'on'CanvasRenderingContext2D':问题:UncaughtDOMException:Failedtoexecute'drawImage'on'CanvasRenderingContext2D':TheHTMLImageElementprovidedisinthe'broken'state.分析:UncaughtDOMException表明未获取dom元素TheHTMLImageElementprovidedisinthe'broken'state.表明元素在获取过程中被中断了,也即元素可能没有正确获取图片路径不正确导致图片未正确获取也将导致该错误代码:HTML文件˂!
使用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>

1、Uncaught DOMException表示什么?

Uncaught DOMException表明未获取dom元素

2、排查错误的方法?

删除法:删除法删除代码以方便找到冲突代码

(因为有些情况下是好的,多了代码就出错,哪肯定是多的代码的问题)

最简单模式:查看最简单模式下是不是好的,如果是,逐步增加代码查找冲突源

3、使用wpaint绘图软件时:Uncaught DOMException出错的教训是什么?

给外部插件加的样式也很有可能是外部插件出错的原因

就是外部插件出错,不仅可能是js错误,css错误也非常常见

二、Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D':

问题:

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.表明元素在获取过程中被中断了,也即元素可能没有正确获取

图片路径不正确导致图片未正确获取也将导致该错误

代码:

HTML文件

<!DOCTYPE>
<html>
	<head>
		<mata name="viewport" content="width=device-width,initial-scale=1">
		<script type="text/javascript" src="http://t.zoukankan.com/js/jquery-1.11.0.min.js"></script>
	</head>
	<body>
		<div>
			<canvas     height="600">
			</canvas>
		</div>
		 <img src="http://t.zoukankan.com/img/girl.jpg"    />  <!--正确路径-->
		<script type="text/javascript" src="http://t.zoukankan.com/js/commonFunctions.js"></script>
		<script type="text/javascript" src="http://t.zoukankan.com/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="http://t.zoukankan.com/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

三、使用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

免责声明:文章转载自《使用wpaint绘图软件时:Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇GreenPlum 提取数据表信息Windows环境Jenkins配置免密登录Linux下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

ubuntu用命令连接无线网络

拔下USB网卡并重新插入。无法使用上述步骤成功连接AP。可以使用以下步骤成功连接AP。参考:1.打开无线网卡iwconfigwlan0txpoweron2.列出无线网络iwlistwlan0scan3.如果要连接到网络MyHome,请输入命令iwconfigwlan 0sessiond“MyHome”。如果网络已加密,密码为0123456789,请输入命令i...

TabWidget修改tab颜色,自定义样式

您可以通过tabWidget-˃setStyleSheet方法设置样式,包括选项卡样式。...

ERROR [IM002] [Microsoft][ODBC 驱动程序管理器] 未发现数据源名称并且未指定默认驱动程序

使用C#生成应用程序以及读取和写入dbfs时,打开方法error[IM002][Microsoft][ODBC驱动程序管理器]中发生错误。找不到数据源名称,也未指定默认驱动程序。这个程序以前使用得很好。升级和修改后,在测试中发现了问题。为了追踪来源,我曾经是一个32位操作系统。现在我安装了一个win764位操作系统。从控制面板到管理工具再到ODBC驱动程序,...

go语言游戏服务端开发(一)——架构

本教程以Go语言为例。特别是游戏服务进程有更新上线时,稳定性还没有被线上并发验证,宕机的几率会增加,数据丢失的风险也会增加。为了减轻风险,可以考虑把数据缓存跟服务进程分离。对于轻中度游戏,游戏的通信量不会很多,没必要每个分服都有一个长连接socket网关。假设一个分服同时连接服务器的客户端有5k,一台机器的socket网关能支持5w个玩家。因此网关需要参与服...

ES6学习之对象的遍历

写在前面的话:在es6中一共有五种遍历对象的方法,如下:for...infor...in循环遍历对象自身的和继承的可枚举属性。Object.getOwnPropertySymbolsObject.getOwnPropertySymbols返回一个数组,包含对象自身的所有Symbol属性的键名。其结果为:从结果可以看出对boy对象的遍历可以得到他的直接身的属性...