仿网浏览图片源码-HTML+JS实现浏览器下载图片

如果使用a标签指向一张图片，你会发现当你点击链接时仿网浏览图片源码，会直接在浏览器中打开该图片并显示：

但在这种情况下仿网浏览图片源码，有一个问题。如果我想点击链接直接将图片下载到本地，如何实现？

查阅资料发现a标签有下载属性。添加该属性后，a标签会直接下载文件，并根据download属性的值设置下载文件的文件名。如果没有设置下载属性的值，则文件将以默认的文件名下载：

然而，这种方法有一个缺点。仅支持同源链接下载。非原创链接依然会直接打开图片：

尝试将图像转换为 Base64 或 Blob：

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')
}

以上两种方法都不是很有效。因为这两种方法只支持生成jpeg和png格式的图片。如果是gif图片，则只能显示第一帧的内容。

后来在download.js官网上看到了下面的例子：

var x=new XMLHttpRequest();
    x.open("GET", "http://danml.com/wave2.gif", true);
    x.responseType = 'blob';
    x.onload=function(e){download(x.response, "dlBinAjax.gif", "image/gif" ); }
    x.send();

这个例子的思路是通过XMLHttpRequest()请求图片链接，然后获取返回的Blob。然后结合上面下载图片的方法，就可以下载图片了：

var x=new XMLHttpRequest();
    x.open("GET", "http://danml.com/wave2.gif", 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();

通过此方法下载图片，GIF图片也能正常显示。

注意，以上方法兼容大部分浏览器，但不兼容IE（不支持下载属性）。为了兼容IE浏览器，需要使用其他方法。

相关文章