前端使用a标签下载图片

1、前端下载图片方法

当下载的图片地址和浏览器访问地址同源时，用简单的a标签赋值的方法，点击即可下载

var a = document.createElement('a'); // 生成一个a元素
a.download = name || 'photo'; // 设置图片名称
a.href = url; // 将生成的URL设置为a.href属性
a.click(); // 触发a的单击事件

当图片不同源时，解决方案

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 url = canvas.toDataURL('image/png'); //得到图片的base64编码数据
	    var a = document.createElement('a'); // 生成一个a元素
	    var event = new MouseEvent('click'); // 创建一个单击事件
	    a.download = name || 'photo'; // 设置图片名称
	    a.href = url; // 将生成的URL设置为a.href属性
        a.dispatchEvent(event); // 触发a的单击事件
    }
    image.src = imgsrc;
}

或者后台处理