Script标签使用

引入插件

你可以在点击此处下载所需文件，放入你的项目中，在代码中引入即可。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>screen shot demo</title>
  <!--修改文件引入路径为你项目的路径即可-->
  <script src="./screenShotPlugin.umd.js"></script>
</head>
<body>

</body>
</html>

注意：如果你无法访问插件的下载网址，需要自行clone项目到本地，安装依赖、执行打包命令来获取umd格式的文件。

项目源码： js-screen-shot

使用插件

在你的业务代码中实例化插件即可。

<script type="text/javascript">
    const changeScreenShot = () => {
      new screenShotPlugin()
    }
</script>

<div id="app">
  <div>
    截图插件文字展示
  </div>
  <br/>
  <button onclick="changeScreenShot()"> 点击截图 </button>
  <p>图片展示</p>
  <img src="./demo-img.jpeg" alt="">
</div>

注意：实例化插件时一定要等dom加载完成，否则插件无法正常工作。