如何利用JS使用链接跨域下载图片

前言

图片是最常见的静态资源文件，可以从本地、外链获取图片，或者使用base64码展示。而canvas的toDataUrl() API可以将图片转base64码，然后模拟点击事件即可下载图片。

外链下载

在本地或者网站下载外链url图片时涉及到跨域，跨域会暴露自己的隐私，浏览器对跨域请求进行了限制，故需要设置crossOrigin为anonymous来允许跨域，浏览器会为这张图片的请求头附带Origin信息，告诉静态资源服务器，请在响应头中附带Access-Control-Allow-Methods、Access-Control-Allow-Origin，以便浏览器放行。

代码示例如下

eventEmitter.js

backend.js

注意

若有跨域的错误提示出现，则需后台服务器进行跨域设置。

小编这里整理了学习web前端的学习资料，相信有很多想要学习web前端的小伙伴，那么赶紧行动起来吧，关注小编，私信【学习】，即可免费获得哦！