canvas 解决getImageData图片跨域问题

    技术2024-04-10  83

    记录: 在canvas中,进行getImageData产生报错: Uncaught SecurityError: Failed to execute ‘getImageData’ on ‘CanvasRenderingContext2D’: The canvas has been tainted by cross-origin data.

    产生原因:

    首先没有服务器环境(如:本地的 html网页,操作本地的图片), 就会报"Unable to get image data from canvas because the canvas has been tainted by cross-origin data"错误。 因为本地测试用的图片是文件夹内的,js跨域限制是不能获取非同一域名下的数据的, 而本地的位置是没有域名的,所以浏览器都认为你是跨域,导致报错。为了阻止欺骗,浏览器会追踪 image data。 当把一个和canvas的域不同的图片放到canvas上,这个canvas就成为 “tainted”(被污染的),浏览器就不让你操作该canvas 的任何像素。 是为了阻止多种类型的XSS/CSRF攻击(两种典型的跨站攻击) img.setAttribute('crossOrigin', 'anonymous')
    Processed: 0.011, SQL: 9