js实现浏览器下载图片

时间：2024-02-21 09:57:25

当我们需要在网页上下载图片或其他canvas绘制的内容时，需要使用下载功能

原理是我们利用a元素的href属性和download属性来实现下载，

<a href="http://www.baidu.com/img/baidu_logo.png" />

a链接上添加href属性，当我们点击a链接时，会弹出这个图片的页面；a标签的download属性可以直接下载，download的属性值是下载文件的文件名，不设置时会以默认文件名下载

<a href="http://www.baidu.com/img/baidu_logo.png" download="download.png"/>
// 下载
function downloadIamge(selector, name) {
    // 通过选择器获取img元素
    var img = document.querySelector(selector)
    // 将图片的src属性作为URL地址
    var url = img.src
    var a = document.createElement(\'a\')
    var event = new MouseEvent(\'click\')
    
    a.download = name || \'img.png\'
    a.href = url
    
    a.dispatchEvent(event)
}

// 调用方式
// 参数一： 选择器，代表img标签
// 参数二： 图片名称，可选
downloadIamge(\'Img\', \'图片名称\')

由于跨域会导致a标签在部分浏览器中会直接打开新标签页，改进如下：

    //谷歌，360极速等浏览器下载
    function download() {
            // 获取base64的图片节点
    var img=document.getElementById(\'Img\');
    // console.log(Dimg);
    // 创建一个img标签
    var image = new Image();
    // 解决跨域 Canvas 污染问题
    image.setAttribute(\'crossOrigin\', \'anonymous\');
    image.onload = function () {
        var canvas = document.createElement(\'canvas\');
        canvas.width = image.width;
        canvas.height = image.height
        var context = canvas.getContext(\'2d\')
        context.drawImage(image, 0, 0, image.width, image.height);
        var url = canvas.toDataURL(\'image/png\')
        // 生成一个a元素
        var a = document.createElement(\'a\');
        // 创建一个单击事件
        var event = new MouseEvent(\'click\');
        // 将a的download属性设置为我们想要下载的图片名称，若name不存在则使用‘下载图片名称’作为默认名称
        a.download = \'二维码.png\' // barcode是默认的名称
        // 将生成的URL设置为a.href属性
        a.href = url
        // 触发a的单击事件
        a.dispatchEvent(event);

     }
    image.src = img.src;
    
    };

 附上两个原文地址：https://www.cnblogs.com/lguow/p/10442509.html （感谢）

　　　　　　　　　　https://www.jianshu.com/p/dfe9c351b898

前端新手，请多多指教

相关文章