Canvas跨域如何解决？这里记录下使用Canvas绘图过程中遇到的跨域问题及解决方法。我们先来看看实现方法。实现方法目标图片一般由图片+文字组成。无论是各种尺寸的图片，还是各种变幻莫测的文字，都可以通过canvasapi的drawImage和fillText方法来完成。基本流程如下：获取canvas上下文--ctxconstcanvas=document.querySelector(selector)constctx=canvas.getContext('2d')绘制时忽略图片内容，直接使用drawImage在上面绘制画布。constimage=newImage()image.src=srcimage.onload=()=>{ctx.save()//这里调用this.ctx.drawImage(image,dx,dy,dWidth,dHeight)，参数如下这个.ctx.restore()}drawImage有3种使用参数的方法。具体用法可以参考MDN文档。通过调用HTMLCanvasElementDOM对象提供的toBlob()、toDataURL()或getImageData()方法获取图像数据。canvas.toBlob(blob=>{//blobyouwant},mimeType,encoderOptions)这里的mimeType默认值为image/png。encoderOptions指定图片质量，可用于压缩，但mimeType格式需要为image/jpeg或image/webp。Canvas跨域一般情况下，如果我们需要输出绘制的图片，可以调用canvas的toBlob()、toDataURL()或getImageData()方法获取图片数据。不过遇到跨域图片就有点尴尬了。可能会报告以下错误：Failedtoexecute'toBlobon'HTMLCanvasElement':Taintedcanvasmaynotbeexported。或者从来源“https://your.website”访问“https://your.image.src”中的图像已被CORS策略阻止：请求中不存在“Access-Control-Allow-Origin”标头资源。我们先来看第二种情况。Access-Control-Allow-Origin如果跨域使用一些图片资源，服务没有正确响应Access-Control-Allow-Origin头信息，会报如下错误信息：Accesstoimageat'https://your.image.src'来自origin'https://your.website'已被CORS策略阻止：请求的资源上不存在'Access-Control-Allow-Origin'标头。意思是不允许跨域访问，那你可以试试让后台把Access-Control-Allow-Origin的值修改成*或者your.website，或者使用同域的资源（考虑？）。接下来我们来解决第一种情况。img.crossOrigin='Anonymous'为避免在调用canvas的toBlob()、toDataURL()或getImageData时，未经允许拉取远程网站信息（如GPS等信息，可专门搜索Exif）导致用户隐私泄露()将抛出安全错误：无法在“HTMLCanvasElement”上执行“toBlob”：可能无法导出受污染的画布。如果你的影像服务允许跨域使用（如果不允许，见上一篇文章），那么你应该考虑给img元素添加crossOrigin属性，即：constimage=newImage()image.crossOrigin='Anonymous'image.src=src这样就可以得到图片数据了。招不到就换同域资源~
