<div " id="qrcode" class="qrcode-item"></div>
import html2canvas from "html2canvas";
function saveQrCode() {
// 这里的类名要与点击事件里的一样
const canvas = document.querySelector("#qrcode");
html2canvas(canvas, {
scale: 2,
logging: false,
useCORS: true,
backgroundColor: null, //设置图片背景为透明
}).then(function (canvas) {
const type = "png";
let imgData = canvas.toDataURL(type);
// 图片格式处理
let _fixType = function (type) {
type = type.toLowerCase().replace(/jpg/i, "jpeg");
let r = type.match(/png|jpeg|bmp|gif/)[0];
return "image/" + r;
};
imgData = imgData.replace(_fixType(type), "image/octet-stream");
let filename =
`${seatInfo.value.storeName}-${seatInfo.value.code}"` + "." + type;
// 保存为文件
// 以bolb文件下载
downFileToLocal(filename, convertBase64ToBlob(imgData));
});
}
// base64转化为Blob对象
function convertBase64ToBlob(imageEditorBase64) {
let base64Arr = imageEditorBase64.split(",");
let imgtype = "";
let base64String = "";
if (base64Arr.length > 1) {
//如果是图片base64,去掉头信息
base64String = base64Arr[1];
imgtype = base64Arr[0].substring(
base64Arr[0].indexOf(":") + 1,
base64Arr[0].indexOf(";")
);
}
// 将base64解码
let bytes = atob(base64String);
//let bytes = base64;
let bytesCode = new ArrayBuffer(bytes.length);
// 转换为类型化数组
let byteArray = new Uint8Array(bytesCode);
// 将base64转换为ascii码
for (let i = 0; i < bytes.length; i++) {
byteArray[i] = bytes.charCodeAt(i);
}
// 生成Blob对象(文件对象)
return new Blob([bytesCode], { type: imgtype });
}
// 下载Blob流文件
function downFileToLocal(fileName, blob) {
// 创建用于下载文件的a标签
const d = document.createElement("a");
// 设置下载内容
d.href = URL.createObjectURL(blob);
// 设置下载文件的名字
d.download = fileName;
// 界面上隐藏该按钮
d.style.display = "none";
// 放到页面上
document.body.appendChild(d);
// 点击下载文件
d.click();
// 从页面移除掉
document.body.removeChild(d);
// 释放 URL.createObjectURL() 创建的 URL 对象
window.URL.revokeObjectURL(d.href);
}
html2canvas实现将dom生成图片并保存至本地
于 2024-08-14 09:04:32 首次发布