HTML+JS实现浏览器下载图片

1.a标签，仅支持同源链接下载

如果直接使用a标签指向一个图片的话，点击链接时它会直接在浏览器中打开图片并显示：

<a href="//static.mingxuan.tech/images/ewm.jpg"></a>

这时候需要给a标签添加一个download属性。

download属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。

添加了该属性，a标签将直接下载文件，并根据download属性的值设置下载文件的文件名，不给download属性设置值的话，则文件将以默认文件名下载：

<!-- 下载文件名为默认名称 -->
<a href="//static.mingxuan.tech/images/ewm.jpg" download></a>
<!-- 下载文件名为baidu.jpg -->
<a href="//static.mingxuan.tech/images/ewm.jpg" download="ewm"></a>
<!-- 下载文件名为baidu.png -->
<a href="//static.mingxuan.tech/images/ewm.jpg" download="ewm.png"></a>

2.图片转成Base64或者Blob的办法:

这两种方法效果都不太理想。

首先，跨域问题，仅支持开放所有ip白名单的url，且本地文件都不可以，

其次，这两种方法仅支持生成jpeg和png格式图片。如果是gif图，仅能显示第一帧的内容。

<button id="btn1">Blob下载图片</button>
<button id="btn2">Base64下载图片</button>
<script>
    var url0 = "http://qiniucdn.jitangcn.com/20200728111742663.gif";
    var url1 = "http://qiniucdn.jitangcn.com/15954687349243.png"; //添加了白名单，允许所有的ip访问下载
    var url2 = "//static.mingxuan.tech/images/ewm.jpg"; //没有开放所有ip的白名单，点击下载会显示跨域

    $("#btn1").click(function () {
        downloadImgByBlob(url1);
    });
    $("#btn2").click(function () {
        downloadImgByBase64(url1);
    });

    function downloadImgByBlob(url) {
        var img = new Image();
        img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            // 将img中的内容画到画布上
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            // 将画布内容转换为Blob
            canvas.toBlob(blob => {
                // blob转为同源url
                var blobUrl = window.URL.createObjectURL(blob);
                // 创建a链接
                var a = document.createElement("a");
                a.href = blobUrl;
                a.download = "";
                // 触发a链接点击事件，浏览器开始下载文件
                a.click();
            });
        };
        img.src = url;
        // 必须设置，否则canvas中的内容无法转换为blob
        img.setAttribute("crossOrigin", "Anonymous");
    }

    function downloadImgByBase64(url) {
        var img = new Image();
        img.onload = function () {
            var canvas = document.createElement("canvas");
            canvas.width = img.width;
            canvas.height = img.height;
            var ctx = canvas.getContext("2d");
            // 将img中的内容画到画布上
            ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
            // 将画布内容转换为base64
            var base64 = canvas.toDataURL();
            // 创建a链接
            var a = document.createElement("a");
            a.href = base64;
            a.download = "";
            // 触发a链接点击事件，浏览器开始下载文件
            a.click();
        };
        img.src = url;
        // 必须设置，否则canvas中的内容无法转换为base64
        img.setAttribute("crossOrigin", "Anonymous");
    }
</script>

3.XMLHttpRequest()请求图片链接，然后获取返回的Blob

需要解决跨域问题。

<button id="btn0">下载图片</button>
<script>
    var url0 = "http://qiniucdn.jitangcn.com/20200728111742663.gif"; //添加了白名单，允许所有的ip访问下载
    var url1 = "http://qiniucdn.jitangcn.com/15954687349243.png"; //添加了白名单，允许所有的ip访问下载
    var url2 = "//static.mingxuan.tech/images/ewm.jpg"; //没有开放所有ip的白名单，点击下载会显示跨域
    $("#btn0").click(function () {
        var x = new XMLHttpRequest();
        x.open("GET", url0, true);
        x.responseType = "blob";
        x.onload = function (e) {
            var url = window.URL.createObjectURL(x.response);
            var a = document.createElement("a");
            a.href = url;
            a.download = "";
            a.click();
        };
        x.send();
    });
</script>