系统中持续报错：The image argument is a canvas element with a width or height of 0

最新推荐文章于 2023-09-01 15:08:17 发布
最新推荐文章于 2023-09-01 15:08:17 发布
阅读量6.1k 收藏 9
点赞数 12
分类专栏： vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/deciduous_leaves/article/details/106762983
版权

完整报错：Layer.js?e2f0:197 Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0，

系统中有生成二维码的drawImage，我一直以为是生成二维码的报错，而且开始我觉得这个报错出现的完全没有规律，一报错就疯狂报，一刷新就没了，修改了生二维码的代码后仍然没能解决，后来经过仔细的排查，发现是系统中绘制echart图的页面在初次进入系统不刷新并且浏览器窗口发生变化时才出现，在寻找问题的过程中发现并不是所有的echart都会报错，而只有下面这个迁徙图才报错，官网地址为https://gallery.echartsjs.com/editor.html?c=x7IX82ACxG

报错大概是在绘制图形时画布大小为0，检查之后发现该图给了宽高，而且迁徙图也是被绘制出来的，然后我试了下把写在css样式文件中的宽高设置给在了行内，这样就好了

希望能让跟我遇到同样问题的人不要再浪费时间

李子栗子麗
关注
  • 12
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
The image argument is a canvas element with a width or height of 0(Uncaught DOMException:)
weixin_65793170的博客
03-17 3059
vue项目报错，完整报错，Uncaught DOMException: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.翻译：在CanvasRenderingContext2D上执行'drawImage'失败:image参数是一个宽度或高度为0的canvas元素。解析：这种报错，一般出现在
Echarts重绘报错 The image argument is a canvas element with a width or height of 0
qq_53142442的博客
05-24 1212
Echarts重绘报错，原因在于绘制时，未正确获取到画布的宽高，在容器内写入行内样式，即可解决
vue使用html2canvas报错：The image argument is a canvas element with a width or height of 0.
summer鸿的博客
10-09 4321
vue使用html2canvas报错 最近这两天，因为项目需要将特定的网页保存为pdf，看网上的代码感觉都前篇一律，可能是页面中的数据都是axios异步请求出来的，导出为pdf要不就是空白要不就是报图上的错误，后面解决了，看下面代码。 *注：导出pdf想要两边留间距,就修改imgWidth，并且在addImage时x方向参数设置你要的边距，a4纸正常宽度是595.28，我这里两边留了20的间距，...
html2canvas:The image argument is a canvas element with a width or height of 0.
sunnyboysix的博客
07-16 1939
DOMException: Failed to execute 'createPattern' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0. html2canvas渲染渐变色报错的 background-image: linear-gradient(180deg, rgba(0,103,178,0.6) 0%, rgba(50,148,219, 0
(echarts)地图报错Uncaught DOMException: Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘:...
nyf_unknow的博客
04-06 3251
报错大概是在绘制图形时画布大小为0，把写在css样式文件中的宽高设置给在行内就可。
Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘: The image argument is a canvas element
SHALLNY
02-25 7412
Echarts重绘报错，原因在于绘制时，未正确获取到画布的宽高，可在容器内写入行内样式，即可解决 <template> <div class="g2-chart-container" style="height: 300px;"> <div v-show="hasData" :id="id" class="g2-chart" style="height: 300px; width: 100%;" /> .
python爬虫报错：OSError: [Errno 22] Invalid argument
01-21
原来是不符合Windows系统文件命名规则！ 如下：1、 允许文件或者文件夹名称不得超过255个字符； 2、 文件名除了开头之外任何地方都可以使用空格； 3、 文件名中不能有下列符号：“？”、“、”、“╲”、“*”、“...
CentOS6挂载linux7samba服务时报错：mount error(22): Invalid argument Refer to the mount.cifs(8) manual page (
01-03
查看samba的版本是4版本的： [root@redhat_192.168.0.12 16:08:07 ~]#rpm -qa samba ...//hahaha.com/devops /mnt/dev/ cifs username=kenji,password=123456,sec=ntlmssp,rw,_netdev 0 0 然后保存配置重新运行mo
TypeError: missing 1 required keyword-only argument-python中的报错问题
12-20
在Python编程语言中，函数参数可以分为位置参数、默认参数、可变参数和关键字参数。在处理函数调用时，必须遵循一定的顺序规则：位置参数 -> 默认参数 -> 可变参数（*args）-> 关键字参数（**kwargs）。当你在定义...
Uncaught DOMException: Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘
qq_43519050的博客
12-22 4436
前端小白记录Vue踩到的坑。 首先这是公司另一位已经离职同事的代码，然后大屏展示页面是用jq引入了一个地图样式。 进入大屏展示都是没什么问题的，看起来一切都十分完美。 但是！！！！ 问题出来了！ 当我离开大屏展示页面，调整窗口大小的时候，无数个 Uncaught DOMException: Failed to execute ‘drawImage’ on ‘CanvasRenderingContext2D’； 就来了！ 我在网上各种搜索，都说是图片路径问题或者v-show/v-if控制的dom元素隐藏和
Echart报错:Uncaught DOMException: Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘
furfur-jiang的博客
09-27 7886
报错大概是在绘制图形时画布大小为0，检查之后发现该图给了宽高，而且迁徙图也是被绘制出来的，然后把写在css样式文件中的宽高设置给在了行内，这样就好了 <div id='myChart' style="width: 100%;height: 400px;"></div> 参考：https://www.cnblogs.com/isme-zjh/p/13508144.html ...
Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘: The provided value is not of type xxxxx
朝花夕拾的博客
09-11 3万+
canvas 在drawImage的时候添加的是一个image对象，不是一个base64图片地址
Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’ 问题解决方法
m0_65005402的博客
06-21 1万+
echarts图片报跨域解决方案
解决方法！：getImageData on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.
热门推荐
w5167839的专栏
05-04 5万+
Uncaught SecurityError: Failed to execute 'getImageData' on 'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.  最近在自学html5 CSS3很推荐李刚的 这个书，今天在家里测试发现 canvas中的getImageData报错
js报错 Uncaught DOMException: Failed to execute ‘getImageData‘ on ‘CanvasRenderingContext2D‘: The can
Treeee_的博客
12-30 1万+
js报错 Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data. 在用IDEA时，调用getImageData()报跨域的错误，原因是图片存储在本地时，是默认没有域名的，用getImageData方法时，浏览器会判定为跨域而报错。 搜索了很多方法尝试解决，包括： 设置时间戳 var img
Video.js 截图 Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘
wgg_126的博客
04-01 2952
Video.js 截图 Failed to execute 'drawImage' on 'CanvasRenderingContext2D' 流媒体服务有一项功能是抓图，也就是从正在播放的视频流中获取图片。这个功能可以在服务 端实现，具体的思路也比较简单从视频流中获取一帧关键帧，解码后保存成一张图片并推送给请求 客户端就可以了。服务端实现简单但存在一个缺点-：实时性不高。经常抓到的图是数秒以后的图片。 其原因是客户端有播放延时，一般情况下公网下Web客户端播放rtmp及rtsp流延时在1-2..
Uncaught DOMException: Failed to execute ‘drawImage‘ on ‘CanvasRenderingContext2D‘: The image argume
最新发布
LJJONESEED的博客
09-01 363
因为在绘制图形时画布大小为0。
html元素转canvas并一键生成png图片(支持img图片元素)html2canvas、canvas2image
csl125的博客
01-31 2万+
在做项目的时候遇到一个需要把页面上的一些元素一键转成图片并且可以下载，在这里就做一个简单的介绍，希望可以帮到大家！！ 需要引入html2canvas.js、canvas2image.js、base64.js 点击获取资源 需要在header中引入html2canvas.js、canvas2image.js、base64.js 库文件 html2image思路   需要获取
Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The image argument is a canvas element with a width or height of 0.
06-02
这个错误通常是由于以下原因之一引起的： 1. 绘制图像时，传递的 canvas 对象的宽度或高度为 0； 2. 绘制图像时，传递的 Image 对象或 Canvas 对象未完全加载完成； 3. 绘制图像时，传递的 Image 对象或 Canvas 对象是空的。 解决此问题的方法如下： 1. 确保传递给 drawImage() 方法的 canvas 对象的宽度和高度都不为 0； 2. 在绘制图像之前，确保传递的 Image 对象或 Canvas 对象已经完全加载完成； 3. 在绘制图像之前，确保传递的 Image 对象或 Canvas 对象不是空的。 以下是一些可能有用的示例代码： ``` // 确保传递的 canvas 对象的宽度和高度都不为 0 if (canvas.width > 0 && canvas.height > 0) { context.drawImage(image, x, y, width, height); } // 在绘制图像之前，确保传递的 Image 对象已经完全加载完成 if (image.complete) { context.drawImage(image, x, y, width, height); } else { image.onload = function() { context.drawImage(image, x, y, width, height); }; } // 在绘制图像之前，确保传递的 Image 对象或 Canvas 对象不是空的 if (image && canvas) { context.drawImage(image, x, y, width, height); } ``` 希望这些解决方法可以帮助你解决问题。如果仍然有问题，请提供更多上下文信息和代码片段，以便我更好地帮助你解决问题。
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值