admin管理员组

文章数量:1531661

  • 设置图片crossOrigin属性
image.crossOrigin = 'Annoymous'

crossorigin有如下取值：

  1. anonymous：执行一个cors请求，但是该请求不会发送相关证书，例如cookie。服务器需要相应的设置Access-control-Allow-Origin响应头，图片才是未被污染的。
  2. 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画布图片跨域问题 内容由热心网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：https://m.elefans.com/dianzi/1725723788a1038695.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。