vue 實現無規則截圖
大傢所見到的大多數都是有規則截圖,可以應付大部分的應用場景,但是對於圖片處理,想要將規則交給用戶,普通的截圖已經滿足不瞭用戶瞭,那我們能不能前端實現圖片的任意規則截取,接下來讓我一起探討一下吧!
通過 svg 實現 圖片截取
使用svg中clipPath image標簽 通過id 映射, 動態位置polygon的坐標,實現圖片的截取
<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部分
<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: { // 初始化拖拽點 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(' '); } }, }, };
效果圖展示
源碼地址
github地址–> github.com/lgxin/captu…
以上就是vue 實現無規則截圖的詳細內容,更多關於vue 無規則截圖的資料請關註WalkonNet其它相關文章!
推薦閱讀:
- None Found