对于应用 cancas 中应用图片的问题

背景

在 canvas 中应用同一域名下的资源，是没什么安全性问题的，然而应用不同域下的资源，就有可能存在安全性问题，没解决好的话就会净化画布，导致资源仍然可能在画布中应用，然而当在画布中调用一些办法的抛出平安谬误。

这里次要以图片为例子去阐明怎么解决这个问题

canvas 的安全性

参考：https://developer.mozilla.org…

如何在 canvas 中应用其余域的图片

次要分为三点：

1.img 元素要设置 crossorigin 属性

参考：https://developer.mozilla.org…

img 元素默认是不开启 CORS 申请，设置了 crossorigin 属性，浏览器向浏览器加载图片的时候就会采取 CORS 模式。启用 CORS 的提跨域资源就能够在 canvas 失常应用，而不会净化画布了。

CORS 模式加载的图片和 img 默认加载图片在申请头和响应头会有一些区别，比拟显著的是申请头中会多 origin 字段，响应头中会多一 Access-Control-Allow-Origin 字段（前提是指标服务器设置了），其实就相当于 img 标签开启了 CORS 模式，对于加载的图片就多了 CORS 申请的一些配置，这些配置就会使得 canvas 认可了这些资源，能够失常应用了。

2. 申请的图片容许跨域

在启用 CORS 申请跨域资源时，资源必须容许跨域，能力失常返回，后端设置，前端个别看响应头有没有 Access-Control-Allow-Origin：* 进行判断

3. 应用 js 形式申请资源时，要留神浏览器缓存

满足第前两个条件个别就能够在 canvas 中失常应用其余域的图片了，然而有时候还会呈现跨域问题，这个时候能够思考浏览器缓存的问题，之前遇到一个问题就是，在一个页面中，页面中 canvas 须要应用的图片曾经通过 img 标签加载过了，浏览器会默认缓存下来，当在 canvas 应用该图片的时候，因为地址一样，浏览器间接返回缓存的图片，如果缓存中的图片不是通过 CORS 申请或者响应头中不存在 Access-Control-Allow-Origin，都会导致报错。

解决办法：

• img 加载的图片加 crossorigin 属性

  <img crossorigin="Anonymous" />

• js 加载的图片地址加上一个工夫戳，地址不一样了，浏览器就会从新申请新的资源，就不会去用缓存的。

  image.src = url + '?time=' + new Date().valueOf();
  // 或者
  image.src = url + '?time=' + new Date().getTime();