pc端，點擊按鈕，下載圖片到本地電腦功能

html：
注意：圖片的路徑需要線上的路徑，絕對路徑

 <button>點擊下載</button>
 <img src="www.com/combination1.jpg" id="savepic" alt="" width="300px" height="400px">

js:
(1)。引入jq
(2)。js邏輯代碼


$("button").click(function(){
      getBase64Image('www.com/combination1.jpg', downloadPic);
})

function downloadPic(data) {
    handlerDownload(base64ToBlob(data), 'combination.jpg')
}
// img轉base64
function getBase64Image(url, cb) {
  var image = new Image();
  image.src = url + '?v=' + Math.random(); // 處理緩存
  image.crossOrigin = "*"; // 支持跨域圖片
  image.onload = function() {
    var canvas = document.createElement("canvas");
    canvas.width = image.width;
    canvas.height = image.height;
    var ctx = canvas.getContext("2d");
    ctx.drawImage(image, 0, 0, image.width, image.height);
    var dataURL = canvas.toDataURL("image/jpeg", 1); // 可選其他值 image/jpeg
    cb(dataURL);
  }
}
// base64轉blob 
function base64ToBlob(code) {
    let parts = code.split(';base64,');
    let contentType = parts[0].split(':')[1];
    let raw = window.atob(parts[1]);
    let rawLength = raw.length;
    let uInt8Array = new Uint8Array(rawLength);
    for (let i = 0; i < rawLength; ++i) {
        uInt8Array[i] = raw.charCodeAt(i);
    }
    return new Blob([uInt8Array], {
        type: contentType
    });
}

// 處理下載
function handlerDownload(data, fileName, contentType = 'image/jpeg') {
    const blob = new Blob([data], {
        type: contentType
    })
    const downloadElement = document.createElement('a')
    const href = window.URL.createObjectURL(blob) // 創建下載的鏈接
    downloadElement.href = href
    downloadElement.download = fileName // 下載後文件名
    document.body.appendChild(downloadElement)
    downloadElement.click() // 點擊下載
    document.body.removeChild(downloadElement) // 下載完成移除元素
    window.URL.revokeObjectURL(href)
}