Canvas - 001 - 图片跨域问题

最新推荐文章于 2022-01-27 11:08:54 发布

wz_131486

最新推荐文章于 2022-01-27 11:08:54 发布

阅读量453

点赞数

分类专栏： jCanvas 文章标签： canvas

本文链接：https://blog.csdn.net/wz_cmyc/article/details/108794752

版权

jCanvas 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

问题说明 - Canvas 图片跨域数据获取失败

不通过 CORS 可以在 Canvas 画布中使用图片, 显示正常, 但是这样会污染画布。一旦画布被污染，我们就不能读取数据。例如, 你不能再使用画布的 toBlob(), toDataURL() 或 getImageData() 方法, 调用它们会抛出安全错误, 如下图所示。这种机制可以避免未经许可拉取远程网站信息而导致的用户隐私泄露。

在这里插入图片描述

解决方案

HTML 规范中图片有一个 crossOrigin属性，结合合适的 CORS 响应头，就可以实现在画布中使用跨域元素的图像。

设置Image对象的的crossOrigin属性；

	let imageSource  = new Image();
	imageSource.setAttribute('crossOrigin', 'anonymous');

若设置完之后，抛出异常：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ head，则需要图片服务器设置：Access-Control-Allow-Origin ，这里已Apache为例：

	1. 编辑文件 httpd.conf，取消 LoadModule headers_module [...] 的注释；
	2. 在需要设置 Access-Control-Allow-Origin 的服务中配置 Header set Access-Control-Allow-Origin "*" 即可；
	3. 重启服务。

完成这步配置之后，前端即可实现canvas的图片跨域访问。

附录

其它服务器配置 Access-Control-Allow-Origin
jCanvas中的跨域访问配置

	$(’#canvasId‘)
	    .addLayer({
	        type: 'image',
	        source: imageUrl,
	        fromCenter: false,
	        name: "image",
	        x: 0, y: 0,
	        width: 200,
	        height: 200,
	        crossOrigin: "Anonymous",
	    })
	    .drawLayers();