后台在图片中添加相关文字，然后转成base64数据，上传到服务器。当代码上线并部署到测试环境时，控制台报如下错误：Uncaught(inpromise)DOMException:Failedtoexecute'toDataURL'on'HTMLCanvasElement':Taintedcanvassmaynotbeexported经过排查，页面正在请求images当出现跨域情况时，canvas会认为图片数据是污染数据，属于不安全数据，无法导出base64数据。为什么canvas将跨域图像数据视为污染数据？请求跨域图片数据时，不满足跨域请求资源的条件。如果画布在没有跨域权限的情况下使用图片的原始数据，这些都是不可信的数据，可能会暴露页面的数据。请求图像资源-带有cookie的相同域请求标头。画布信任图像数据。请求图片资源-跨域默认直接请求跨域图片。由于不满足跨域请求资源的条件，图像数据不被canvas信任。为了解决图片的跨域资源共享问题，![]()
元素提供了一个支持的属性：crossOrigin，它有两个可选值：anonymous和use-credentials。健康）状况。anonymoususe-credentials用于匿名请求跨域图片资源，不会发送证书（如cookie等）带名字请求跨域图片资源，会携带证书数据RequestHeadersoriginorigin、cookieResponseheadersAccess-Control-Allow-OriginAccess-Control-Allow-Origin，Access-Control-Allow-Credentials必填条件Access-Control-Allow-Origin字段值需要包含请求域。Access-Control-Allow-Origin字段的值需要包含请求域，不能是通配符*。Access-Control-Allow-Credentials字段的值需要为true，表示允许请求发送证书数据。代码示例：//页面来源是https://a.comconstcanvas=document.createElement('canvas');constcontext=canvas.getContext('2d');constimg=新图像（）；img.crossOrigin='anonymous';img.onload=()=>{context.drawImage(this,0,0);context.getImageData(0,0,img.width,img.height);};img.src='https://b.com/a.png';结论总结了请求图片资源的所有场景：同域、匿名跨域、命名跨域，以及成功跨域需要的条件。希望对遇到类似问题的朋友有所帮助。参考CORS_enabled_imageHTMLImageElement.crossOriginCross-OriginResourceSharing(CORS)跨域相关机制概述（三）：crossorigin属性canvas-todataurl-securityerror
