解决canvas画布图片跨域问题

设置图片crossOrigin属性

image.crossOrigin = 'Annoymous'

crossorigin有如下取值：

anonymous：执行一个cors请求，但是该请求不会发送相关证书，例如cookie。服务器需要相应的设置Access-control-Allow-Origin响应头，图片才是未被污染的。
use-credentials:
执行一个cors请求，该请求会发送相关证书，携带cookie和http基本验证信息。服务器需要相应设置Access-Control-Allow-Origin响应头。

发现问题

设置完crossOrigin属性后，设置access-control-allow-origin后，依然发现画布跨域报错，在本人反复研究下，发现与浏览器的缓存存在关系，那么如何每次使用画布时清除浏览器的缓存呢？

解决问题

在查阅大量材料后发现通过：

 image.src = this.previewImgObj.fileUrl + `?timestamp= ${Date.now()}`

通过给图片路径拼接时间戳的方式，使之实现每次通过画布的图片路径唯一，即可解决图片跨域报错，完美解决、nice
也可通过在图像的 src ( img.src = url + '?v=' + Math.random();) 中附加一个随机查询字符串来避免缓存。
如果您的图像来自不同的域，并且您希望能够在绘制这些图像后导出画布内容，那么除了使用crossOrigin属性加载它们之外，您别无选择。
如果您真的面临链接错误，根据它，正确的解决方法是始终从您的服务器响应发送 CORS 标头，无论请求是否使用 Origin 标头发出。

解决canvas画布图片跨域问题相关推荐

解决Canvas.toDataURL 图片跨域问题
解决Canvas.toDataURL 图片跨域问题参考文章: (1)解决Canvas.toDataURL 图片跨域问题 (2)https://www.cnblogs.com/ajg016/p/547 ...
快速解决Canvas.toDataURL 图片跨域的问题
快速解决Canvas.toDataURL 图片跨域的问题参考文章: (1)快速解决Canvas.toDataURL 图片跨域的问题 (2)https://www.cnblogs.com/good10 ...
解决canvas微信头像跨域问题
只需在nginx配置微信图片转发处理就好,加上如下代码: location ^~ /wechat_image/ {add_header 'Access-Control-Allow-Origin' &q ...
h5跨域访问图片_h5标签canvas关于getImageData跨域的问题
h5标签canvas关于getImageData跨域的问题在学习h5的时候,canvas标签中getImageData()报错:security error! 具体代码如下(chrome浏览器): ...
php把网络图片转化为base64格式，解决html2canvas图片跨域问题
一.前言最近在用html2canvas做网页截图功能.这个开源库使用很简单,代码也很方便,但难点在于跨域问题.比如说,我的一个页面中有图片也有文字,图片是来自于图片服务器的网络图片.此时我们要生成截 ...
前端常见问题——Canvas 图片跨域
尽管不通过 CORS 就可以在 Canvas 画布中使用图片,但是这会污染画布.一旦画布被污染,你就无法读取其数据.例如,你不能再使用画布的 toBlob(), toDataURL() 或 getIm ...
JSPDF运用实例（解决图片跨域问题）
为什么80%的码农都做不了架构师?>>> 引入js(这里可以自己去官网下载jspdf https://parall.ax/products/jspdf) <script ...
vue实现HTML转PDF (已解决清晰、页边距、图片跨域导出等问题)
最近有需求做简历打印的功能,就又花时间研究了一下html转图片导出,里面牵扯到多页pdf导出时的分页和页边距问题,清晰度问题以及图片跨域问题等.我们一个一个来解决. 一.先说HTML转PDF的实现方法 ...
html图片左侧留白,HTML+CSS入门如何解决图片跨域导致的截图空白
本篇教程介绍了HTML+CSS入门如何解决图片跨域导致的截图空白,希望阅读本篇文章以后大家有所收获,帮助大家HTML+CSS入门. < 1. 后端支持:图片要是cdn上的地址,并且允许图片跨域 ...

解决canvas画布图片跨域问题

解决canvas画布图片跨域问题相关推荐

最新文章

热门文章