canvas绘制图片跨域,canvas为什么会跨域
画布跨域怎么解决？这里记录下用Canvas绘图过程中遇到的跨域问题和解决方法。
我们先来看看实现方法。
实现方法
图像通常由图像文本组成。无论是奇怪的图片还是不可预知的文字，都可以通过canvas api drawImage和fillText方法来完成。
基本流程如下：
1.获取画布上下文- ctx
const canvas=document . query selector(selector)const CTX=canvas . get context( 2D )2。图画
忽略图片上的内容，用drawImage直接画在画布上。
constitimage=new image()image . src=src image . onload=()={ CTX . save()//这里，我们用以下参数调用this.ctx.drawimage (image，dx，dy，dwidth，d height)this . CTX . restore()} draw image。参数有三种使用方式，具体用法
3.获取图像数据。
调用HTMLCanvasElement DOM对象提供的toBlob()、toDataURL()或getImageData()方法。
Canvas.toBlob(blob={//你想要的blob }，mimeType，编码器选项)这里mimetype的默认值是image/png。EncoderOptions指定图片质量，可用于压缩，但mimeType格式需要是image/jpeg或image/webp。
Canvas 跨域
一般情况下，如果需要输出绘制的图像，可以调用canvas的toBlob()、toDataURL()或getImageData()方法来获取图像数据。但是遇到图片跨域的情况就有点尴尬了。可能会报告以下错误：
未能对“HTMLCanvasElement”执行“toBlob”:受污染的画布可能无法导出。
或者
CORS策略已阻止从源“https://your.website”访问位于“https://your.image.src”的图像：请求的资源上不存在“Access-Control-Allow-Origin”标头。
我们先来看看第二种情况。
访问控制允许来源
如果您跨域使用一些图像资源，并且服务没有正确响应Access-Control-Allow-Origin标头信息，将会报告以下错误消息：
CORS策略已阻止从源“https://your.website”访问位于“https://your.image.src”的图像：请求的资源上不存在“Access-Control-Allow-Origin”标头。
说明不允许跨域访问，那么可以尝试让后台修改Access-Control-Allow-Origin的值为*或者你的. website，或者使用同一个域资源代替(考虑？)。
接下来，我们来解决第一个案例。
Img.crossOrigin=Anonymous 为了避免未经许可从远程网站拉取信息导致用户隐私泄露(如GPS等信息，可搜索Exif了解详情)，调用canvas toBlob()、toDataURL()或getImageData()时会抛出安全错误：
未能对“HTMLCanvasElement”执行“toBlob”:受污染的画布可能无法导出。
如果您的影像服务允许跨域使用(如果不允许，请参阅上面的文章)，那么您应该考虑将crossOrigin属性添加到img元素中，即：
const image=new image()image . cross origin= anonymous image . src=src这样就可以得到图片数据了。如果没有，就切换到同域资源~
这就是本文的全部内容。希望对大家的学习和支持有帮助。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。