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)
}