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

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

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

<a href="//static.tianyichuxin.com/images/ewm.jpg" ></a>

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

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

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

<!-- 下载文件名为默认名称 -->
<a href="//static.tianyichuxin.com/images/ewm.jpg" download ></a>
<!-- 下载文件名为baidu.jpg -->
<a href="//static.tianyichuxin.com/images/ewm.jpg" download="ewm" ></a>
<!-- 下载文件名为baidu.png -->
<a href="//static.tianyichuxin.com/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.tianyichuxin.com/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.tianyichuxin.com/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>