关于在cancas中使用图片的问题背景在canvas中使用同域名下的资源没有安全问题，但是使用不同域下的资源可能会存在安全问题。如果处理不当，画布会被污染，导致资源在画布中仍然可以使用，但是在画布中调用某些方法时，会抛出安全错误。这里我们主要以图片为例来说明如何解决这个问题Canvas安全参考：https://developer.mozilla.org...如何在canvas中使用其他域的图片主要分为三点：1.img元素应该设置crossorigin属性参考：https://developer.mozilla.org...img元素默认不开启CORS请求。如果设置了crossorigin属性，浏览器加载图片到浏览器时会采用CORS模式。启用CORS的跨域资源可以在画布上正常使用，不会污染画布。CORS方式加载的图片和img默认加载的图片在请求头和响应头上有一些区别。比较明显的就是请求头中会多一个origin字段，响应头中会多一个Access-Control-Allow-Origin字段（前提是设置了目标服务器），其实相当于开启了CORS模式img标签。对于加载的图片，有一些CORS请求的配置。这些配置将使画布识别这些资源并可以正常使用。2.请求的图片允许跨域。开启CORS请求跨域资源时，资源必须允许跨域才能正常返回。后端设置好，前端一般会检查响应头是否有Access-Control-Allow-Origin:*来判断3.使用js方式请求资源时，注意浏览器缓存。如果满足前两个条件，就可以在画布中正常使用其他域的图片，但有时会出现跨域问题。这时候可以考虑浏览器缓存之前遇到的问题是，在一个页面中，canvas需要在页面中使用的图片已经通过img标签加载了，浏览器默认会缓存。在画布中使用图片时，由于地址相同，浏览器直接返回缓存的图片。如果没有通过CORS请求缓存中的图片或者响应头中没有Access-Control-Allow-Origin，就会报错。解决方法：为img加载的图片添加crossorigin属性
