正文

vue 实现无规则截图

︶ㄣ米米素材网 メ
米米素材网V管理员 / 阅读
0702

这篇文章主要介绍了vue 实现无规则截图的方法，帮助大家更好的理解和学习使用vue框架，感兴趣的朋友可以了解下

大家所见到的大多数都是有规则截图,可以应付大部分的应用场景,但是对于图片处理,想要将规则交给用户,普通的截图已经满足不了用户了,那我们能不能前端实现图片的任意规则截取,接下来让我一起探讨一下吧!

vue 实现无规则截图

通过 svg 实现 图片截取

使用svg中clipPath image标签 通过id 映射, 动态位置polygon的坐标,实现图片的截取

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
  <div>
      <div class="content" @mousemove="mousemove" @mouseup="(e) => {mouseup(e);}">
        <!-- 画布展示 -->
        <svg
          ref="blackSvg"
          class="blackSvg"
          xmlns="http://www.w3.org/2000/svg"
          width="300"
          height="300"
        >
          <defs>
            <clipPath id="clippath">
              <polygon :points="points"></polygon>
            </clipPath>
          </defs>
          <image
            xmlns:link="http://www.w3.org/1999/xlink"
            href="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg" rel="external nofollow"
            width="300"
            height="300"
            preserveAspectRatio="none"
            style="clip-path: url(#clippath)"
          ></image>
        </svg>
        <!-- 拖拽点 -->
        <ul class="interception">
          <li
            v-for="item in 4"
            :ref="`li${item}`"
            :key="item"
            @mousedown="(e) => {mousedown(e, item);}"
          ></li>
        </ul>
        <!-- 底图展示 -->
        <img
          class="blackImge"
          src="https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3228549874,2173006364&fm=26&gp=0.jpg"
          alt=""
        />
        <!-- 遮罩层 -->
        <div class="blackDiv"></div>
  </div>
</div>

css部分

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<style lang="sass">
.blackDiv
    width: 100%
    height: 100%
    position: absolute
    top: 0
    z-index: 2
    background: rgba(0,0,0, 1)
.content
    width:300px
    height:300px
    text-align: left
    position: relative
    .blackSvg
        position: absolute
        top: 0
        z-index: 3
    .blackImge
        position: absolute
        top: 0
        left: 0
        width: 300px
        height: 300px
    .interception
        list-style: none
        position: absolute
        top: 0
        margin: 0
        padding: 0
        z-index: 3
        >li
            position: absolute
            width: 10px
            height: 10px
            background: blue
            border-radius: 50%
            cursor: pointer
            &:hover
                transform: scale(1.2)
                transition-duration: .2
        >li:nth-child(1)
            top: 10px
            left: 10px
        >li:nth-child(2)
            top: 10px
            left: 100px
        >li:nth-child(3)
            top: 100px
            left: 100px
        >li:nth-child(4)
            top: 100px
            left: 10px
</style>
<script>
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
export default {
  name: 'Canvas',
  data() {
    return {
      points: '0 0,300 0,300 300,0 300', // 图片展示初始化
      status: false,
      index: 0,
      disX: 0,
      disY: 0,
      coordinates: { // 初始化拖拽点
        1: [0, 0],
        2: [300, 0],
        3: [300, 300],
        4: [0, 300],
      },
    };
  },
  mounted() {
    this.$nextTick(() => {
      for (let key in this.coordinates) {
        const left = this.coordinates[key][0];
        const top = this.coordinates[key][1];
        this.$refs[`li${key}`].style.left = `${left}px`;
        this.$refs[`li${key}`].style.top = `${top}px`;
        if (key == 2 || key == 3) {
          this.$refs[`li${key}`].style.left = `${left - 10}px`;
        }
        if (key == 3 || key == 4) {
          this.$refs[`li${key}`].style.top = `${top - 10}px`;
        }
      }
      document.onmouseup = () => {
        this.status = false;
      };
    });
  },
  methods: {
    //鼠标按下
    mousedown(e, index) {
      this.status = true;
      this.index = index;
      this.disX = e.clientX - this.$refs[`li${index}`].offsetLeft;
      this.disY = e.clientY - this.$refs[`li${index}`].offsetTop;
    },
    // 鼠标抬起
    mouseup(e) {
      this.status = false;
    },
    // 鼠标移动
    mousemove(e) {
      if (this.status) {
        let left = e.clientX - this.disX;
        let top = e.clientY - this.disY;
        this.$refs[`li${this.index}`].style.left = `${left}px`;
        this.$refs[`li${this.index}`].style.top = `${top}px`;
        this.coordinates[this.index] = [left, top];
        const pointsArr = [];
        for (let item in this.coordinates) {
          pointsArr.push(
            Array.from(this.coordinates[item], (e) => {
              return e + 5;
            })
          );
        }
        this.points = pointsArr.join(' ');
      }
    },
  },
};

效果图展示

vue 实现无规则截图

源码地址

github地址--> github.com/lgxin/captu…

以上就是vue 实现无规则截图的详细内容，更多关于vue 无规则截图的资料请关注米米素材网其它相关文章！

原文链接：https://juejin.cn/post/6950478072906776589