js 圖檔下載下傳（不是直接在頁面打開圖檔）

浏覽器圖檔下載下傳（而不是直接在頁面打開圖檔）

項目中出現了使用者要下載下傳圖檔的情況，做完了功能之後發現根本下載下傳不了，都是直接在浏覽器打開了，搜了好久才找到方法

代碼如下

function downloadIamge(imgsrc, name) {
    //下載下傳圖檔位址和圖檔名
    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 _dataURL = canvas.toDataURL('image/png'); //得到圖檔的base64編碼資料

        var blob_ = dataURLtoBlob(_dataURL); // 用到Blob是因為圖檔檔案過大時，在一部風浏覽器上會下載下傳失敗，而Blob就不會

        var url = {
            name: name || "圖檔.png", // 圖檔名稱不需要加.png字尾名
            src: blob_
        };

        if (window.navigator.msSaveOrOpenBlob) {   // if browser is IE
            navigator.msSaveBlob(url.src, url.name);//filename檔案名包括擴充名，下載下傳路徑為浏覽器預設路徑
        } else {
            var link = document.createElement("a");
            link.setAttribute("href", window.URL.createObjectURL(url.src));
            link.setAttribute("download", url.name + '.png');
            document.body.appendChild(link);
            link.click();
        }
    };
    image.src = imgsrc;

    function dataURLtoBlob(dataurl) {
        var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
            bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }
        return new Blob([u8arr], {type: mime});
    }
}