canvs画布跨域报错_跨域画布图像

canvs画布跨域报错

You can do some really awesome stuff with images when you push their data into canvas.  And of course, when you're done playing around with the image, you can export the canvas data to an IMG element and data URI.  What we sometimes don't remember, however, is that the cross-origin rules apply to those images, so if you try to convert an image from another host to canvas, you'll get an error.  You can use this snippet from HTML5 Boilerplate within the image host domain's .htaccess file to allow cross-origin data reading of images:

将图像的数据推送到画布中时，您可以对图像做一些很棒的事情。 当然，当您完成图像处理后，可以将画布数据导出到IMG元素和数据URI 。 但是，有时我们不记得的是，跨域规则适用于这些图像，因此，如果您尝试将图像从其他主机转换为画布，则会出现错误。 您可以在图像主机域的.htaccess文件中使用HTML5 Boilerplate中的此代码段，以允许跨域读取图像数据：

<IfModule mod_setenvif.c>
	<IfModule mod_headers.c>
		<FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
			SetEnvIf Origin ":" IS_CORS
			Header set Access-Control-Allow-Origin "*" env=IS_CORS
		</FilesMatch>
	</IfModule>
</IfModule>

Allowing for CORS within .htaccess then allows you to pull image data when the image is on another domain. This is especially useful on CDNs! .htaccess is a life-saver sometimes!

然后，如果.htaccess中包含CORS，则可以在图像位于另一个域上时提取图像数据。 这在CDN上特别有用！ .htaccess有时是救命的！

翻译自: https://davidwalsh.name/cross-domain-canvas-images

canvs画布跨域报错