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

前端新手，請多多指教