前言

最近在遇到了一个前端选择区域截图的需求（类似于微信、QQ），刚好在掘金里找到了一个插件region-screenshot-js,来记录一下使用过程。
github仓库：github.com/weijun-lab/…

1.下载插件

cnpm install region-screenshot-js

2.在vue中引入并给页面填充内容

<template>
  <div class="demo">
    <ul>
      <li>风急天高猿啸哀，渚清沙白鸟飞回。</li>
      <li>无边落木萧萧下，不尽长江滚滚来。</li>
      <li>万里悲秋常作客，百年多病独登台。</li>
      <li>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</li>
    </ul>
  </div>
</template>

<script setup>
import regionScreenshot from 'region-screenshot-js';
</script>
<style>
body{
  background-color: #eee;
}
.demo{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
</style>

此时的页面：

3.调用插件开始截图

<template>
  <div class="demo">
    <button @click="screenshot">点我截图</button>
    <ul>
      <li>风急天高猿啸哀，渚清沙白鸟飞回。</li>
      <li>无边落木萧萧下，不尽长江滚滚来。</li>
      <li>万里悲秋常作客，百年多病独登台。</li>
      <li>艰难苦恨繁霜鬓，潦倒新停浊酒杯。</li>
    </ul>
  </div>
</template>

<script setup>
import regionScreenshot from 'region-screenshot-js';
function screenshot(){
  let screentsot = new regionScreenshot();
  screentsot.on("screenshotGenerated",(dataUrl)=>{
    console.log("截图完成了，图片的地址是："+dataUrl)
  })
}
</script>
<style>
body{
  background-color: #eee;
}
.demo{
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%,-50%);
}
</style>

最终可以在监听的事件里面获取到图片编码

写在最后

感谢阅读，前端小白，还在持续学习中，如有问题请指正 参考：juejin.cn/post/737166…

文章转自：https://juejin.cn/post/7373592723863797775