对于应用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();