js 截图

• 使用html2canvas库

// 插件库下载
cnpm install html2canvas

• TS方法封装

/**
 * @description: 截图工具
 * @author: hanjie
 * @time: 2025-5-19 16:00:10
 */
import html2canvas from 'html2canvas';

export default class SnappingTool {
  /**
  * dataURL 转换为 Blob
  * @param {String} dataUrl 数据地址
  * @returns {Blob}
  * @static
  */
  static dataURLtoBlob(dataUrl: string): Blob {
    let arr = dataUrl.split(",");
    // @ts-ignore
    let mime: any = arr[0].match(/:(.*?);/)[1] || 'image/octet-stream';
    let bStr = atob(arr[1]);
    let len = bStr.length;
    let u8Arr = new Uint8Array(len);
    while (len--) {
      u8Arr[len] = bStr.charCodeAt(len);
    }
    return new Blob([u8Arr], { type: mime });
  }

  /**
   * 截取并下载
   * @param snappingEL 截图元素
   */
  static async snappingMap(snappingEL: HTMLElement, name: string = `地图截图${Date.now()}`) {
    const canvas = await html2canvas(snappingEL, {
      useCORS: true, // 启用跨域支持
      allowTaint: true, // 允许跨域数据污染'被污染'的canvas
      backgroundColor: null,
      logging: true, // 调试时查看具体错误
    });
    const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
    const link = document.createElement('a');
    const blob = SnappingTool.dataURLtoBlob(image);
    const objUrl = URL.createObjectURL(blob);
    link.download = `${name}.png`;
    link.href = objUrl;
    link.click();
  }

  /**
   * 截取获取blob
   * @param snappingEL 截图元素
   */
  static async snappingMapBlob(snappingEL: HTMLElement) {
    const canvas = await html2canvas(snappingEL, {
      useCORS: true, // 启用跨域支持
      allowTaint: true, // 允许跨域数据污染'被污染'的canvas
      backgroundColor: null,
      logging: true, // 调试时查看具体错误
    });
    const image = canvas.toDataURL('image/png').replace('image/png', 'image/octet-stream');
    const blob = SnappingTool.dataURLtoBlob(image);
    return blob;
  }

}

• 使用示例

import SnappingTool from '@/utils/SnappingTool'

// const appRef = ref()
const dom = document.getElementById('app');
// 使用截图并下载
SnappingTool.snappingMap(dom)