快捷導(dǎo)航

vue 實(shí)現(xiàn)無(wú)規(guī)則截圖

更新時(shí)間：2021年04月15日 10:35:52 作者：渺小塵埃

這篇文章主要介紹了vue 實(shí)現(xiàn)無(wú)規(guī)則截圖的方法，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下

大家所見(jiàn)到的大多數(shù)都是有規(guī)則截圖,可以應(yīng)付大部分的應(yīng)用場(chǎng)景,但是對(duì)于圖片處理,想要將規(guī)則交給用戶,普通的截圖已經(jīng)滿足不了用戶了,那我們能不能前端實(shí)現(xiàn)圖片的任意規(guī)則截取,接下來(lái)讓我一起探討一下吧!

通過(guò) svg 實(shí)現(xiàn) 圖片截取

使用svg中clipPath image標(biāo)簽通過(guò)id 映射, 動(dòng)態(tài)位置polygon的坐標(biāo),實(shí)現(xiàn)圖片的截取

    <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"
               rel="external nofollow" 
              width="300"
              height="300"
              preserveAspectRatio="none"
              style="clip-path: url(#clippath)"
            ></image>
          </svg>
          <!-- 拖拽點(diǎn) -->
          <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部分

<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>

export default {
  name: 'Canvas',
  data() {
    return {
      points: '0 0,300 0,300 300,0 300', // 圖片展示初始化
      status: false,
      index: 0,
      disX: 0,
      disY: 0,
      coordinates: { // 初始化拖拽點(diǎn)
        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: {
    //鼠標(biāo)按下
    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;
    },
    // 鼠標(biāo)抬起
    mouseup(e) {
      this.status = false;
    },
    // 鼠標(biāo)移動(dòng)
    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(' ');
      }
    },
  },
};