前端快照，生成截图，前端拍照功能的实现

项目中要实现下载dom的快照，或者生产截图，可以使用html2canvas 这个库，

npm install --save html2canvas

封装成类可以在任何项目中使用

import html2canvas from "html2canvas";
class ImageSnapshot {constructor(dom, url) {this.dom = dom;this.url = url;this.loadingMessage = null; // 用于存储加载提示信息的 DOM 元素}handleDown() {this.showLoadingMessage(); // 显示加载提示信息// 转换传递过来的图片为 base64this.convertImageToBase64(this.url).then((base64) => {// 找到所有 img 元素并设置 src 为 base64let images = this.dom.querySelectorAll("img");images.forEach((img) => {img.src = base64;});return html2canvas(this.dom, {useCORS: true,backgroundColor: "#002F4F", // 设置背景颜色为 #002F4Flogging: true,onclone: (clonedDoc) => {// 处理克隆文档中的 SVG 元素或其他可能的问题let svgElements = clonedDoc.querySelectorAll("svg");svgElements.forEach((svg) => {let transform = svg.getAttribute("transform");if (transform) {svg.setAttribute("transform",transform.replace(/rotate\(NaN\)/g, ""));}});},});}).then((canvas) => {// 创建链接元素const link = document.createElement("a");// 将 canvas 转换为 Blob 对象canvas.toBlob((blob) => {if (blob) {// 设置链接地址为生成的 Blob 对象 URLlink.href = URL.createObjectURL(blob);// 设置下载的文件名和类型link.download = `snapshot_${Date.now().toString()}.png`;// 模拟点击下载链接link.dispatchEvent(new MouseEvent("click"));this.hideLoadingMessage(); // 隐藏加载提示信息} else {console.error("Canvas to Blob conversion failed.");this.hideLoadingMessage(); // 隐藏加载提示信息}}, "image/png");}).catch((error) => {console.error("html2canvas error:", error);this.handleImageError(); // 调用错误处理方法this.hideLoadingMessage(); // 隐藏加载提示信息});}convertImageToBase64(url) {return new Promise((resolve, reject) => {let img = new Image();img.crossOrigin = "Anonymous";img.onload = function () {let canvas = document.createElement("canvas");canvas.width = img.width;canvas.height = img.height;let ctx = canvas.getContext("2d");ctx.drawImage(img, 0, 0);resolve(canvas.toDataURL("image/png"));};img.onerror = reject;img.src = url;});}handleImageError() {// 创建一个提示信息元素let errorMessage = document.createElement("div");errorMessage.textContent = "图片加载失败，请检查网络连接或图片地址。";errorMessage.style.color = "red";errorMessage.style.position = "absolute";errorMessage.style.top = "10px";errorMessage.style.left = "10px";errorMessage.style.backgroundColor = "white";errorMessage.style.padding = "5px";errorMessage.style.border = "1px solid red";// 将提示信息元素添加到 dom 中this.dom.appendChild(errorMessage);// 使用 html2canvas 捕获不含图片的 domhtml2canvas(this.dom, {useCORS: true,backgroundColor: "#002F4F", // 设置背景颜色为 #002F4Flogging: true,}).then((canvas) => {const link = document.createElement("a");canvas.toBlob((blob) => {if (blob) {link.href = URL.createObjectURL(blob);link.download = `snapshot_${Date.now().toString()}.png`;link.dispatchEvent(new MouseEvent("click"));this.hideLoadingMessage(); // 隐藏加载提示信息} else {console.error("Canvas to Blob conversion failed.");this.hideLoadingMessage(); // 隐藏加载提示信息}}, "image/png");}).catch((error) => {console.error("html2canvas error during fallback:", error);this.hideLoadingMessage(); // 隐藏加载提示信息});}showLoadingMessage() {// 创建一个加载提示信息元素this.loadingMessage = document.createElement("div");this.loadingMessage.textContent = "正在生成快照，请稍候...";this.loadingMessage.style.color = "blue";this.loadingMessage.style.position = "absolute";this.loadingMessage.style.top = "10px";this.loadingMessage.style.left = "10px";this.loadingMessage.style.backgroundColor = "white";this.loadingMessage.style.padding = "5px";this.loadingMessage.style.border = "1px solid blue";// 将加载提示信息元素添加到 dom 中this.dom.appendChild(this.loadingMessage);}hideLoadingMessage() {// 移除加载提示信息元素if (this.loadingMessage) {this.dom.removeChild(this.loadingMessage);this.loadingMessage = null;}}
}// 导出 ImageSnapshot 类
export default ImageSnapshot;// 使用示例
// const domElement = document.querySelector(".dialogWrap");
// const imageUrl = 'https://example.com/image.png';
// const snapshot = new ImageSnapshot(domElement, imageUrl);
// snapshot.handleDown();