解决canvas画布图片跨域问题

  • 设置图片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 标头发出。

评论 10
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值