js实现浏览器下载图片

当我们需要在网页上下载图片或其他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

前端新手，请多多指教