• 售前

  • 售后

热门帖子
入门百科

vue 实现无规则截图

[复制链接]
小妖花满楼满fx 显示全部楼层 发表于 2021-10-26 12:46:47 |阅读模式 打印 上一主题 下一主题
目录


  • 通过 svg 实现 图片截取
  • css部门
  • 结果图展示
  • 源码所在
各人所见到的大多数都是有规则截图,可以应付大部门的应用场景,但是对于图片处置处罚,想要将规则交给用户,平凡的截图已经满足不了用户了,那我们能不能前端实现图片的任意规则截取,接下来让我一起探究一下吧!


通过 svg 实现 图片截取


使用svg中clipPath image标签 通过id 映射, 动态位置polygon的坐标,实现图片的截取
  1.     <div>
  2.         <div class="content" @mousemove="mousemove" @mouseup="(e) => {mouseup(e);}">
  3.           <!-- 画布展示 -->
  4.           <svg
  5.             ref="blackSvg"
  6.             class="blackSvg"
  7.             xmlns="http://www.w3.org/2000/svg"
  8.             width="300"
  9.             height="300"
  10.           >
  11.             <defs>
  12.               <clipPath id="clippath">
  13.                 <polygon :points="points"></polygon>
  14.               </clipPath>
  15.             </defs>
  16.             <image
  17.               xmlns:link="http://www.w3.org/1999/xlink"
  18.               href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg" rel="external nofollow"
  19.               width="300"
  20.               height="300"
  21.               preserveAspectRatio="none"
  22.               style="clip-path: url(#clippath)"
  23.             ></image>
  24.           </svg>
  25.           <!-- 拖拽点 -->
  26.           <ul class="interception">
  27.             <li
  28.               v-for="item in 4"
  29.               :ref="`li${item}`"
  30.               :key="item"
  31.               @mousedown="(e) => {mousedown(e, item);}"
  32.             ></li>
  33.           </ul>
  34.           <!-- 底图展示 -->
  35.           <img
  36.             class="blackImge"
  37.             src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg"
  38.             alt=""
  39.           />
  40.           <!-- 遮罩层 -->
  41.           <div class="blackDiv"></div>
  42.     </div>
  43.   </div>
复制代码
css部门
  1. <style lang="sass">
  2. .blackDiv
  3.     width: 100%
  4.     height: 100%
  5.     position: absolute
  6.     top: 0
  7.     z-index: 2
  8.     background: rgba(0,0,0, 1)
  9. .content
  10.     width:300px
  11.     height:300px
  12.     text-align: left
  13.     position: relative
  14.     .blackSvg
  15.         position: absolute
  16.         top: 0
  17.         z-index: 3
  18.     .blackImge
  19.         position: absolute
  20.         top: 0
  21.         left: 0
  22.         width: 300px
  23.         height: 300px
  24.     .interception
  25.         list-style: none
  26.         position: absolute
  27.         top: 0
  28.         margin: 0
  29.         padding: 0
  30.         z-index: 3
  31.         >li
  32.             position: absolute
  33.             width: 10px
  34.             height: 10px
  35.             background: blue
  36.             border-radius: 50%
  37.             cursor: pointer
  38.             &:hover
  39.                 transform: scale(1.2)
  40.                 transition-duration: .2
  41.         >li:nth-child(1)
  42.             top: 10px
  43.             left: 10px
  44.         >li:nth-child(2)
  45.             top: 10px
  46.             left: 100px
  47.         >li:nth-child(3)
  48.             top: 100px
  49.             left: 100px
  50.         >li:nth-child(4)
  51.             top: 100px
  52.             left: 10px
  53. </style>
  54. <script>
复制代码
  1. export default {
  2.   name: 'Canvas',
  3.   data() {
  4.     return {
  5.       points: '0 0,300 0,300 300,0 300', // 图片展示初始化
  6.       status: false,
  7.       index: 0,
  8.       disX: 0,
  9.       disY: 0,
  10.       coordinates: { // 初始化拖拽点
  11.         1: [0, 0],
  12.         2: [300, 0],
  13.         3: [300, 300],
  14.         4: [0, 300],
  15.       },
  16.     };
  17.   },
  18.   mounted() {
  19.     this.$nextTick(() => {
  20.       for (let key in this.coordinates) {
  21.         const left = this.coordinates[key][0];
  22.         const top = this.coordinates[key][1];
  23.         this.$refs[`li${key}`].style.left = `${left}px`;
  24.         this.$refs[`li${key}`].style.top = `${top}px`;
  25.         if (key == 2 || key == 3) {
  26.           this.$refs[`li${key}`].style.left = `${left - 10}px`;
  27.         }
  28.         if (key == 3 || key == 4) {
  29.           this.$refs[`li${key}`].style.top = `${top - 10}px`;
  30.         }
  31.       }
  32.       document.onmouseup = () => {
  33.         this.status = false;
  34.       };
  35.     });
  36.   },
  37.   methods: {
  38.     //鼠标按下
  39.     mousedown(e, index) {
  40.       this.status = true;
  41.       this.index = index;
  42.       this.disX = e.clientX - this.$refs[`li${index}`].offsetLeft;
  43.       this.disY = e.clientY - this.$refs[`li${index}`].offsetTop;
  44.     },
  45.     // 鼠标抬起
  46.     mouseup(e) {
  47.       this.status = false;
  48.     },
  49.     // 鼠标移动
  50.     mousemove(e) {
  51.       if (this.status) {
  52.         let left = e.clientX - this.disX;
  53.         let top = e.clientY - this.disY;
  54.         this.$refs[`li${this.index}`].style.left = `${left}px`;
  55.         this.$refs[`li${this.index}`].style.top = `${top}px`;
  56.         this.coordinates[this.index] = [left, top];
  57.         const pointsArr = [];
  58.         for (let item in this.coordinates) {
  59.           pointsArr.push(
  60.             Array.from(this.coordinates[item], (e) => {
  61.               return e + 5;
  62.             })
  63.           );
  64.         }
  65.         this.points = pointsArr.join(' ');
  66.       }
  67.     },
  68.   },
  69. };
复制代码
结果图展示



源码所在


github所在--> github.com/lgxin/captu…
以上就是vue 实现无规则截图的详细内容,更多关于vue 无规则截图的资料请关注脚本之家别的相干文章!

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作