html+js/jquery前端頁面下載圖片資源

1. 本地URL，或者瀏覽器訪問直接下載型的URL，這種比較簡單，直接通過html就可以實現

<a id="downloadId" href="/image/imgname.png" download="imgname.png">
   <button type="button" class="btn btn-flat">下載</button>
</a>

2. 外網瀏覽器可訪問的圖片，跨域下載，一般要通過點擊圖片另存爲方式存儲的。這種比較複雜

首先要保證可以跨域訪問, 以下測試的跨域具體配置如下：

上代碼：

#html body里加入一行代碼
<button type="button" class="btn btn-flat" onclick="downLoadConfirm('https://sywebimg.bd.bcebos.com:443/cloudwebimg/45GPgxS2c4pQwzYT.jpg', '45GPgxS2c4pQwzYT.jpg')" >下載圖片</button>


#script加入如下兩個方法
function downLoadConfirm(domImg, name) {
    var reg = new RegExp("[\\u4E00-\\u9FFF]+", "g");
    var filename = '';
    if(reg.test(name)){
        filename  =pinyinUtil.getFirstLetter(name);
    } else {
        filename = name;
    }

    var eleLink = document.createElement('a');
    eleLink.download = filename;
    eleLink.style.display = 'none';

    var image = new Image();
    image.src = domImg + '?v=' + Math.random(); // 處理緩存
    image.crossOrigin = "*";  // 支持跨域圖片
    var that = this;
    image.onload = function () {
        var base64 = that.getBase64Image(image);
        eleLink.href = base64;
        // 觸發點擊
        document.body.appendChild(eleLink);
        eleLink.click();
        // 然後移除
        document.body.removeChild(eleLink);
    }
}

// 圖片轉換成base64
function getBase64Image(img) {
    var canvas = document.createElement("canvas");
    canvas.width = img.width;
    canvas.height = img.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, img.width, img.height);
    var dataURL = canvas.toDataURL("image/jpg", 0);  // 可選其他值 image/jpeg
    return dataURL;
}

以上2中方式親測可行，如有更好的方案，歡迎討論。