使用HTML或JavaScript下载图像

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

我需要下载文件扩展名为的图像。请帮助解决这个问题。提前谢谢

我认为它是有效的：

---

这对我来说很好，如果您通过在javascript中创建链接来尝试这样做，可能会对您有用

var link=document.createElement（'a'）；
link.textContent='下载图像'；
link.addEventListener（'click'，函数（ev）{
link.href=”https://www.w3schools.com/html/pic_trulli.jpg";
link.download=“image.jpg”；
}，假）；
document.body.appendChild（链接）
使用Promise和async/await尝试以下操作：

toDataURL(url) {
    return fetch(url).then((response) => {
            return response.blob();
        }).then(blob => {
            return URL.createObjectURL(blob);
        });
}

然后

在此处查找文档：
使用javascript和html尝试我的代码
别忘了加上

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>


您在哪些浏览器上测试代码？您使用什么浏览器？因为我在chrome上测试了这个功能，而且它们在meIn Firefox上都非常有效，所以存在一个问题，文件必须来自您自己的服务器或域名，否则它将在浏览器中打开。@mrdeadsven我使用的是chrome版本67.0.3396.99。下载2链接正在导航到图像，而不是downloading@SylwesterPilarz我使用的是chrome版本67.0.3396.99，虽然我使用了有效的图像URL，但两个链接都在下载0kb的文件
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);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>