html2canvas 图片跨域无法加载的问题

最近有个项目,需要截图,想到截图就想到canvas,想到canvas就想到html2canvas。。。

问题:无法截取图片,有图片的直接空白了。
原因:经过观察研究发现,canvas在调用drawImage方法的时候,是会受到浏览器同源策略限制的。
解决方法:前端设置useCORS为true,后端将图片设置允许跨域共享(即相应头里面要带上access-control-allow-origin)

遇到这种问题,我很淡定,作为一个成熟的库,这么常见的问题肯定是有解决策略的。翻开官网,找到了这两个参数:
在这里插入图片描述
但是不管我怎么弄,加一个还是都加上,都不起作用。有点慌。。。
只能看下网友是怎么解决的了。
有说转base64的,但最后发现绕不开drawImage。
还有就是用useCORS,这个官网也有写:
在这里插入图片描述
但加上也没有作用。最后发现,这是需要后端配合使用的。要让这个参数生效,请求的图片必须带有下面这个字段:
在这里插入图片描述
最后,问题解决了,还是绕不开后端。

跨域资源共享 (CORS)

  • 0
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值