dom-screenshots

截图组件

Usage no npm install needed!

<script type="module">
  import domScreenshots from 'https://cdn.skypack.dev/dom-screenshots';
</script>

README

dom-screenshots

html的截图组件
获取html元素的内容转换成canvas，再通过canvas转换成图片，以达到截图的效果。本文提供了一个Example.vue文件可以查看具体用法

用法

安装

npm i dom-screenshots

引用

组件导出一个convertToImage方法，通过将domElement作为参数传入该方法，返回一个 src是图片文件的<img>标签

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>
<img src="" alt="">
<div id="box">hello world</div>
<script type="module">
  import convertToImage from "./index.js";
  var box = document.getElementById('box')
  convertToImage(box).then(dom => {
    // dom 是一个 <img>元素 img.src就是图片文件
    document.append(dom)
  })
</script>
</body>
</html>