javascript使用链接跨域下载图片

前言 图片是最常见的静态资源文件，可以从本地、外链获取图片，或者使用base64码展示。而canvas的toDataUrl() API可以将图片转base64码，然后模拟点击事件即可下载图片。 外链下载 在本地或者网站下载外链url图片时涉及到跨域，跨域会暴露自己的隐私，浏览器对跨域请求进行了限制，故需要设置crossOrigin为anonymous来允许跨域，浏览器会为这张图片的请求头附带Origin信息，告诉静态资源服务器，请在响应头中附带Access-Control-Allow-Methods、Access-Control-Allow-Origin，以便浏览器放行。 代码示例如下 eve 在JavaScript中，跨域下载图片是一项常见的需求，特别是在处理外部链接的图片时。由于浏览器的安全策略，跨域请求通常受到限制，以防止恶意网站获取用户的敏感信息。在本例中，我们将探讨如何使用JavaScript和HTML5的一些特性来解决这个问题。 理解跨域的基本概念。当一个网页尝试从不同的源（协议、域名或端口）加载资源时，就会发生跨域。由于同源策略的限制，浏览器默认不允许这种行为。但是，服务器可以通过设置响应头中的`Access-Control-Allow-Origin`字段来允许特定源的跨域请求。在这个场景中，我们需要设置`crossOrigin`属性为`anonymous`，这样浏览器会在请求头中添加`Origin`字段，告知服务器允许跨域请求。 以下是实现跨域下载图片的步骤： 1. **设置图片的`crossOrigin`属性**：在创建Image对象时，设置`crossOrigin`属性为`'Anonymous'`。这告诉浏览器这是一个匿名的跨域请求。例如： ```javascript downloadedImg = new Image(); downloadedImg.crossOrigin = 'Anonymous'; downloadedImg.src = imageUrl; ``` 2. **监听图片加载完成**：使用`addEventListener`监听`load`事件，当图片加载完成后执行回调函数。在回调中，我们可以获取图片的Base64编码，这是通过将图片绘制到Canvas上，然后调用`toDataURL`方法实现的。 3. **转换图片为Base64编码**：创建一个新的Canvas元素，获取其2D渲染上下文，然后使用`drawImage`方法将图片绘制到Canvas上。接着，调用`toDataURL`方法，指定图像的类型（如JPEG或PNG），返回包含Base64编码的URL。 ```javascript function getImgDataUrl() { const canvas = document.createElement('canvas'); // ...其他设置... context.drawImage(downloadedImg, 0, 0); eventEmitter.emit('getHref', canvas.toDataURL(`image/${dtype}`)); } ``` 4. **模拟点击下载**：有了Base64编码后，可以创建一个`<a>`标签，设置`href`为Base64 URL，并指定文件名。通过模拟点击`<a>`标签，可以触发浏览器下载操作。 ```javascript function imitateDownloadByA(href, filename) { const a = document.createElement('a'); a.download = filename; a.href = href; const e = document.createEvent('MouseEvents'); e.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null); a.dispatchEvent(e); } ``` 在提供的代码示例中，还引入了一个`EventEmitter`类，用于在不同模块之间传递事件。当图片加载完成后，`startDownloadImg`函数会触发`'getHref'`事件，传递Base64编码的图片URL。在其他模块中，可以通过监听这个事件来执行下载操作。 跨域下载图片的关键在于利用`crossOrigin`属性进行跨域设置，以及使用Canvas和Base64编码来绕过浏览器的安全限制。这种方法在处理外部图片资源时非常有用，但请注意，服务器必须配置正确的响应头才能允许这样的请求。否则，即使设置了`crossOrigin`，浏览器仍然会阻止跨域请求。