canvas 图片跨域

跨域安全性

• 位图中的像素可能来自多种来源，包括从其他主机检索的图像或视频，因此不可避免的会出现安全问题。
• 尽管不通过 CORS 就可以在 canvas 中使用其他来源的图片，但是这会污染画布，并且不再认为是安全的画布
• 在"被污染"的 canvas 中调用以下方法将会抛出安全错误
  • 在 canvas 的上下文上调用 getImageData()
  • 在 元素本身调用 toBlob()、toDataURL() 或 captureStream()

解决方式

cors

• crossOrigin：表明是否必须使用 CORS 完成相关图像的抓取，详情

// 服务端允许指定域名访问
Access-Control-Allow-Origin: *

// 客户端请求图片时，需要在 JavaScript 的 img 标签上设置 crossOrigin 属性
const img = new Image();
img.crossOrigin = 'anonymous'; // 设置 crossorigin 属性
img.src = 'https://path-to-your-image.com/image.png';

采用 base64 格式图片

• 将图片转换为 Base64 编码的数据 URI。如此一来，图片便已编码到数据 URI 中，并不会出现 CORS 问题

代理服务器

• 当无法更改图片资源服务器的 CORS 设置，可以通过设置代理服务器，客户端请求代理服务器，代理服务器请求源服务器