解决本地HTML的跨域问题(Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D')

引言

使用HTML5中的canvas,当用到getImageData方法获取图片信息时,碰到跨域无法获取的情况。
在Chrome浏览器中报错:
Uncaught DOMException: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

代码


	
		Your browser does not support the canvas element.
	
	

原因

图片存储在本地时,是默认没有域名的,用getImageData方法时,浏览器会判定为跨域而报错!

解决跨域问题

将图片放置在服务器中

我是将图片和HTML文件放置在一个文件夹内,通过IIS服务器新建网站,将网站物理路径指定该文件夹。通过http的形式访问就不会报错了。(也可以通过wampserver服务器,将该文件夹放置www文件内访问)

效果图

解决本地HTML的跨域问题(Uncaught DOMException: Failed to execute 'getImageData' on 'CanvasRenderingContext2D')_第1张图片

你可能感兴趣的:(HTML)