(前端)页面截取生成图片 html2canvas

1. 封装一个公共的截图函数

import html2canvas from 'html2canvas'

/**
 * 截屏函数
 * @param id 需要截取的dom元素id
 * @param name 下载的图片名称
 * @param isReturn 是否返回截取的图片,用作回显
 */
export const screenshot = (id: any, name: any, isReturn?: boolean) => { 
  const dom = document.getElementById(id)
  const screenshotCanvas: any = document.getElementById('screenshotCanvas')
  if (!dom || !screenshotCanvas) return
  const w = dom.offsetWidth
  const h = dom.offsetHeight
  
  screenshotCanvas.width = w * 2
  screenshotCanvas.height = h * 2
  const opts: any = {
    canvas: screenshotCanvas, // 自定义 canvas
    width: w, // dom 原始宽度
    height: h,
    backgroundColor: 'rgba(6, 8, 16)',
    useCORS: true // 【重要】开启跨域配置
  }
  html2canvas(dom, opts).then((canvas: any) => {
    if(IEVersion()) { // ie浏览器处理
      var blob = canvas.msToBlob();
      navigator.msSaveBlob(blob, `${name}.png`);
      return;
    }
    const dataURL = canvas.toDataURL('image/png')
    if (isReturn) {
      console.log(dataURL);
      return dataURL
    } else {
      const a = document.createElement('a') // 生成一个a元素
      a.download = name // 设置图片名称
      a.href = dataURL // 将生成的URL设置为a.href属性
      if (myBrowser() === 'FF') { // 火狐浏览器处理
        a.dispatchEvent(new MouseEvent('click', {bubbles: true, cancelable: true, view: window}));
        return
      }
      a.click()
    }
  })
}

2. 在最外层dom里放一个隐藏的canvas标签，用于整个项目截图时使用

  <canvas style={{display: 'none'}} id="screenshotCanvas">canvas>

3. 使用

import { screenshot } from '@/assets/js/public';

const img = screenshot('domId', '图片名', true)