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

使用svg中clipPath image標(biāo)簽 通過id 映射, 動(dòng)態(tài)位置polygon的坐標(biāo),實(shí)現(xiàn)圖片的截取
<div><div @mousemove='mousemove' @mouseup='(e) => {mouseup(e);}'> <!-- 畫布展示 --> <svg ref='blackSvg' xmlns='http://www.w3.org/2000/svg' > <defs> <clipPath id='clippath'><polygon :points='points'></polygon> </clipPath> </defs> <image xmlns:link='http://www.w3.org/1999/xlink' rel='external nofollow' preserveAspectRatio='none' ></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 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 .blackSvgposition: absolutetop: 0z-index: 3 .blackImgeposition: absolutetop: 0left: 0width: 300pxheight: 300px .interceptionlist-style: noneposition: absolutetop: 0margin: 0padding: 0z-index: 3>li position: absolute width: 10px height: 10px background: blue border-radius: 50% cursor: pointer &:hovertransform: 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(’ ’); } }, },};效果圖展示

github地址--> github.com/lgxin/captu…
以上就是vue 實(shí)現(xiàn)無規(guī)則截圖的詳細(xì)內(nèi)容,更多關(guān)于vue 無規(guī)則截圖的資料請(qǐng)關(guān)注好吧啦網(wǎng)其它相關(guān)文章!
相關(guān)文章:
1. ASP動(dòng)態(tài)網(wǎng)頁制作技術(shù)經(jīng)驗(yàn)分享2. vue項(xiàng)目登錄成功拿到令牌跳轉(zhuǎn)失敗401無登錄信息的解決3. php使用正則驗(yàn)證密碼字段的復(fù)雜強(qiáng)度原理詳細(xì)講解 原創(chuàng)4. JSP+Servlet實(shí)現(xiàn)文件上傳到服務(wù)器功能5. uniapp自定義驗(yàn)證碼輸入框并隱藏光標(biāo)6. 淺談?dòng)蓀osition屬性引申的css進(jìn)階討論7. ASP 信息提示函數(shù)并作返回或者轉(zhuǎn)向8. CSS可以做的幾個(gè)令你嘆為觀止的實(shí)例分享9. vue前端RSA加密java后端解密的方法實(shí)現(xiàn)10. asp批量添加修改刪除操作示例代碼

網(wǎng)公網(wǎng)安備