使用 HTML5，您可以将“下载”属性添加到您的链接中。

<a href="/path/to/image.png" download>

兼容的浏览器将提示下载具有相同文件名的图像（在本例中为 image.png）。

如果您为此属性指定一个值，那么它将成为新的文件名：

<a href="/path/to/image.png" download="AwesomeImage.png">

更新：从 2018 年春季开始，这不再适用于跨域hrefs。因此，如果您想<a href="https://i.imgur.com/IskAzqA.jpg" download>在 imgur.com 以外的域上创建，它将无法按预期工作。Chrome 弃用和移除公告

通过将链接附加到文档，我也设法在 Chrome 和 Firefox 中实现了这一点。

var link = document.createElement('a');
link.href = 'images.jpg';
link.download = 'Download.jpg';
document.body.appendChild(link);
link.click();
document.body.removeChild(link);

Leeroy & Richard Parnaby-King：

更新：从 2018 年春季开始，这不再适用于跨域 hrefs。因此，如果您想在 imgur.com 以外的域上创建，它将无法按预期工作。Chrome 弃用和移除公告

function forceDownload(url, fileName){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", url, true);
    xhr.responseType = "blob";
    xhr.onload = function(){
        var urlCreator = window.URL || window.webkitURL;
        var imageUrl = urlCreator.createObjectURL(this.response);
        var tag = document.createElement('a');
        tag.href = imageUrl;
        tag.download = fileName;
        document.body.appendChild(tag);
        tag.click();
        document.body.removeChild(tag);
    }
    xhr.send();
}

使用 Promise 和 async/await 的更现代方法：

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

然后

async download() {
        const a = document.createElement("a");
        a.href = await toDataURL("https://cdn1.iconfinder.com/data/icons/ninja-things-1/1772/ninja-simple-512.png");
        a.download = "myImage.png";
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
}

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

2018 年春季更新

<a href="/path/to/image.jpg" download="FileName.jpg">

虽然这仍然受支持，但截至 2018 年 2 月，chrome 禁用了跨源下载的此功能，这意味着这仅在文件位于同一域名上时才有效。

在 Chrome 禁用跨域下载的新更新之后，我想出了一种下载跨域图像的解决方法。您可以将其修改为适合您需要的函数。如果需要，您可以通过更多研究获得图像 mime 类型（jpeg、png、gif 等）。也可能有一种方法可以对视频执行类似的操作。希望这对某人有帮助！

Leeroy & Richard Parnaby-King：

更新：从 2018 年春季开始，这不再适用于跨域 hrefs。因此，如果您想在 imgur.com 以外的域上创建，它将无法按预期工作。Chrome 弃用和移除公告

var image = new Image();
image.crossOrigin = "anonymous";
image.src = "https://is3-ssl.mzstatic.com/image/thumb/Music62/v4/4b/f6/a2/4bf6a267-5a59-be4f-6947-d803849c6a7d/source/200x200bb.jpg";
// get file name - you might need to modify this if your image url doesn't contain a file extension otherwise you can set the file name manually
var fileName = image.src.split(/(\\|\/)/g).pop();
image.onload = function () {
    var canvas = document.createElement('canvas');
    canvas.width = this.naturalWidth; // or 'width' if you want a special/scaled size
    canvas.height = this.naturalHeight; // or 'height' if you want a special/scaled size
    canvas.getContext('2d').drawImage(this, 0, 0);
    var blob;
    // ... get as Data URI
    if (image.src.indexOf(".jpg") > -1) {
    blob = canvas.toDataURL("image/jpeg");
    } else if (image.src.indexOf(".png") > -1) {
    blob = canvas.toDataURL("image/png");
    } else if (image.src.indexOf(".gif") > -1) {
    blob = canvas.toDataURL("image/gif");
    } else {
    blob = canvas.toDataURL("image/png");
    }
    $("body").html("<b>Click image to download.</b><br><a download='" + fileName + "' href='" + blob + "'><img src='" + blob + "'/></a>");
};

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