js屏幕截图，将前端显示的html元素进行截取并下载

屏幕截图（将 html 元素转换成图片进行下载）

场景：

写了一个 div 用来做海报、名片之类的，需要对他进行截取，并下载

<style>
  .box {
    width: 300px;
    height: 300px;
    background-color: red;
  }
</style>

<div class="box"></div>
<button>生成名片</button>

实现：

1. 引入 html2canvas 插件将 html 元素转换成 canvas

npm i html2canvas

// 返回一个promise，res的参数为canvas对象
html2canvas(document.querySelector('.box'))

2. 写一个方法对对 canvas 元素进行下载

function downloadCanvas(canvas) {
  // 调用canvas的toDataUrl方法将canvas变成图片，参数为图片格式，默认为'image/png'
  const canvasUrl = canvas.toDataURL()
  // 生成a标签进行下载
  const oA = document.createElement('a')
  // 设置下载的文件名，默认是'下载'
  oA.download = ''
  oA.href = canvasUrl
  document.body.appendChild(oA)
  oA.click()
  // 下载之后把创建的元素删除
  oA.remove()
}

完整代码

<style>
  .box {
    width: 300px;
    height: 300px;
    background-color: red;
  }
</style>

<div class="box"></div>
<button>生成名片</button>

<script>
  document.querySelector('button').addEventListener('click', () => {
    html2canvas(document.querySelector('.box')).then((canvas) => {
      // 调用canvas的toDataUrl方法将canvas变成图片，参数为图片格式，默认为'image/png'
      const canvasUrl = canvas.toDataURL()
      // 生成a标签进行下载
      const oA = document.createElement('a')
      // 设置下载的文件名，默认是'下载'
      oA.download = ''
      oA.href = canvasUrl
      document.body.appendChild(oA)
      oA.click()
      // 下载之后把创建的元素删除
      oA.remove()
    })
  })
</script>