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中方式亲测可行，如有更好的方案，欢迎讨论。