HTML canvas中getImageData跨域问题解决方法

最新推荐文章于 2024-01-10 16:40:28 发布

原创

最新推荐文章于 2024-01-10 16:40:28 发布 · 2.9k 阅读

1 ·

CC 4.0 BY-SA版权

在使用HTML5 canvas的getImageData方法时，如果图片跨域，会导致浏览器报错，如Chrome的DOMException和IE的安全错误。问题源于图片存储在本地时浏览器认为其跨域。解决方法包括将图片放在服务器上遵循同源策略，或者采用CORS策略允许跨域请求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、问题：在使用html5的canvas是，当用到getImageData方法获取图片信息时，会碰到跨域无法获取的情况，代码如下：

<script type="text/javascript">
			var video = document.getElementById('v_player');
			var canvas1 = document.getElementById('v_player1');
			var context1 = canvas1.getContext('2d');

			function animate() {
				if(!video.ended) {
					context1.drawImage(video, 0, 0, canvas1.width, canvas1.height);
					/*
					浏览器直接访问时出现  getImageData()方法报错
					报错信息：Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingcontextD': The 
							canvas has been tainted by cross-origin data.
					原因：图片存储在本地时，是默认没有域名的，用getImageData方法时，浏览器会判定为跨域而报错！
					解决方法：1.把静态资源放置在服务器中，通过服务器返回给客户端，遵循同源策略；*/
					var imgdata = context1.getImageData(0, 0, canvas1.width, canvas1.height);
					var data = imgdata.data;
					for(var i = 0, n = data.length; i < n; i += 4) {
						var average = (data[i] + data[i + 1] + data[i + 2]) / 3;
						data[i] = average;