使用 HTML 或 JavaScript 下载图像

Tha*_*r D 3 html javascript image

我需要从服务器下载图像。在下面的 HTML5 代码中,“下载 1”成功下载了图像。但是“下载 2”是导航到图像 URL 而不是下载图像。“下载 1”和“下载 2”之间的主要区别在于“下载 2”的文件扩展名为“.jpg”。我想要“下载 2”来下载图像。

我需要下载带有文件扩展名的图像。请帮助解决问题。提前致谢!

<a id="download_image" href="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M" download>Download 1</a>
<a id="download_image" href="https://www.w3schools.com/html/pic_trulli.jpg" download>Download 2</a>
Run Code Online (Sandbox Code Playgroud)

Cur*_*rse 7

使用 Promise 和 async/await 尝试以下操作:

toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}
Run Code Online (Sandbox Code Playgroud)

然后

async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("http://serverpath/images/50.jpg");
        a.download = "";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}
Run Code Online (Sandbox Code Playgroud)

在此处查找文档:https : //developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch


小智 1

我认为它有效:

<HTML>
<Header></Header>

<body>
  <a id="download_image" href="" download="https://docs.google.com/uc?id=0B0jH18Lft7ypSmRjdWg1c082Y2M">Download 1</a>
  <a id="download_image" href="" download="http://serverpath/images/50.jpg">Download 2</a>
</body>

</HTML>
Run Code Online (Sandbox Code Playgroud)

如果您喜欢,请查看在线演示https://codepen.io/zhipenglu/pen/dKQXQx

这是另一个库,它做同样的事情,称为文件编写器: https: //github.com/azl397985856/file-writer