<div>
<img id="qrcodeImg" src="http://localhost:9099/Library/Qrcode/4464e901b7ed4fcf9e3452701a521df7.jpg">
<button type="button" id="download-button">
<i class="ace-icon fa fa-download"></i>
<span>下载二维码(移动端)</span>
</button>
</div>
绑定click事件
function downloadQrcode(downloadButton) {
$("#"+downloadButton).click(function() {
//得到图片
var imgSrc = $('#qrcodeImg').attr("src");
downloadIamge(imgSrc, "img"+new Date().getTime());
});
}
下载图片方法
function downloadIamge(imgsrc, name) {//下载图片地址和图片名
let image = new Image();
// 解决跨域 Canvas 污染问题
image.setAttribute("crossOrigin", "anonymous");
image.onload = function() {
let canvas = document.createElement("canvas");
canvas.width = image.width;
canvas.height = image.height;
let context = canvas.getContext("2d");
context.drawImage(image, 0, 0, image.width, image.height);
let url = canvas.toDataURL("image/png");
let a = document.createElement("a");
let event = new MouseEvent("click");
a.download = name;
a.href = url;
a.dispatchEvent(event);
};
image.src = imgsrc;
};