虽然图片可以不使用CORS在Canvas画布中使用，但是这样会污染画布。一旦画布被污染，您就无法读取其数据。例如，您不能再使用Canvas的toBlob()、toDataURL()或getImageData()方法，调用它们会引发安全错误。该机制可以避免未经许可拉取远程网站信息导致的用户隐私泄露。HTML规范中的图片有一个crossorigin属性，结合合适的CORS响应头，就可以在canvas中使用跨域![]()
元素的图片。crossOrigin/CORS同域跨域无CORS跨域有CORS默认支持渲染，不支持toDataURL支持渲染，不支持toDataURLanonymousN/A支持同上渲染，支持toDataURLuse-credentialsN/A支持同上渲染，不支持toDataURL总结：Canvas可以正常渲染跨域图片，但是当跨域图片没有设置跨域响应头或者没有设置crossOrigin='anonymous'时，使用canvas.toDataURl会抛出如下错误：ChromedoesnotsetcrossOriginUncaughtDOMException:Failedtoexecute'toDataURL'on'HTMLCanvasElement':Taintedcanvasmaynotbeexported.atImage.img.onload...跨域访问图像在'http://localhost:3001/canvas.jpg'来自来源'http://localhost:3000'已被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'标头。因此不允许访问源“http://localhost:3000”。CrossOrigin=use-credentialsAccess设置为来自来源“http://localhost:3000”的“http://localhost:3002/canvas.jpg”的图像已被CORS策略阻止：“Access-Control-”的值当请求的凭据mo时，响应中的Allow-Origin'标头不能是通配符'*'de是“包括”。因此不允许访问源“http://localhost:3000”。Safari/Firefox没有设置crossOriginSecurityError:Theoperationisinsecure。跨域[Error]Originhttp://192.168.3.99:3000isnotallowedbyAccess-Control-Allow-Origin.[Error]加载资源失败：Originhttp://192.168.3.99:3000isnotallowedby访问控制允许来源。（canvas.jpg，第0行）[错误]跨源资源共享策略拒绝跨源图像加载。CorssOrigin=use-credentials[Error]当凭据标志为真时，无法在Access-Control-Allow-Origin中使用通配符。[错误]加载资源失败：当凭据标志为真时，无法在Access-Control-Allow-Origin中使用通配符。（canvas.jpg，第0行）[错误]跨源资源共享策略拒绝跨源图像加载。启动服务器测试示例npmstart:启动服务器npmrunstart:corsdisable:启动跨域镜像服务器npmrunstart:corsable:启动跨域-CORS镜像服务器访问http://localhost:3000其他问题cossOrigin存在兼容性问题对于不支持cossOrigin的浏览器（不支持IE10及以下版本支持，Android4.3及以下版本不支持）可以使用XMLHttprequest和URL.createObjectURL()进行兼容，参考测试例子Ajax解决Canvas图片的跨域问题，为什么不使用同域的图片呢？现在的前端开发一般都是把静态资源放在CDN上，比如阿里云或者腾讯云服务，都会有一个专门的域名来访问这些资源。参考跨域资源共享crossOrigin属性：RequestingCORSaccesstocontentAllowingcross-originuseofimagesandcanvas解决canvas图片getImageData,toDataURL跨域问题Drawingimagestocanvaswithimg.crossOrigin=“Anonymous”doesn'tworkCrossDomainImages和被污染的画布
