用戶需求，雙擊編輯器中的圖片的時候，出現彈框，用戶可以選擇水印縮放倍數、距離以及水印所放置的方位（當然有很多水印插件，位置大小透明度用戶都能夠自定義，但是用戶需求如此，就自己寫了）

編輯器內部已經實現了一個方法，點擊圖片的時候，圖片四周會出現8個點點，用于拖動圖片大小，找到百度編輯器注冊的事件，這個事件構建了圖片點擊時候，8個點的html結構以及給點位注冊了各種事件，點擊圖片之后頁面會出現他們構建的dom結構，我們在此基礎上去修改源碼

?

?

然后再init方法中，對圖片蒙版點擊雙擊事件，打開vue的圖片編輯彈框，代碼如下

?

彈框打開，我們利用canvas繪制圖片和圖片水印功能，廣播通信中已經將流媒體地址拿到，直接繪制需要添加水印的圖片

    imgtocanvas(src){// 創建一個圖片const img1 = document.createElement('img')img1.src =  srcthis.bgcsrc = srcconst canvas = document.getElementById('mergedCanvas');// 首先清空畫布const ctx = canvas.getContext('2d');img1.onload = (e)=>{console.log(e,img1.naturalWidth,img1.naturalHeight,img1,'當前圖片元素的信息')this.canvasWidth = img1.naturalWidththis.canvasHeight = img1.naturalHeightcanvas.width = this.canvasWidthcanvas.height =  this.canvasHeightctx.drawImage(img1, 0, 0);}},

?繪制后，點擊方位鍵繪制水印小圖片

    handelDreation(item){// // 獲取canvas畫布this.currentDreation = itemconst canvas = document.getElementById('mergedCanvas');let canvasWidth = canvas.getAttribute('width') * 1let canvasHeigth = canvas.getAttribute('height') * 1const ctx = canvas.getContext('2d');const img1 = document.getElementById('img1');ctx.clearRect(0,0,this.canvasWidth,this.canvasHeight);// 重新繪制一下背景圖ctx.drawImage(img1, 0, 0);let img2 = document.querySelector('.active-img') //需要繪制的水印圖片console.log(img2.naturalWidth,img2.naturalHeight,canvasWidth,canvasHeigth,'圖片原始尺寸')let dx = 0 //繪制橫坐標let dy = 0 //繪制y坐標let dw = img2.naturalWidth / this.ruleForm.imgscale //繪制圖像寬度let dh = img2.naturalHeight / this.ruleForm.imgscale  //繪制圖像寬度// 每次都重新繪制一張畫布switch(item.className){case 'icon-left_top': //左上dx = this.ruleForm.distinctdy = this.ruleForm.distinctctx.drawImage(img2, dx, dy,dw,dh);// wrapCanvas.drawImage(0,0,50,50);break;case 'icon-top': //上dx = canvasWidth / 2 - dw / 2dy = this.ruleForm.distinctctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-fangwei': //右上dx = canvasWidth - dw - this.ruleForm.distinctdy = this.ruleForm.distinctctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-left1': //左dx = this.ruleForm.distinctdy = canvasHeigth / 2 - dh / 2ctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-fangwei-01': //居中dx = canvasWidth / 2 - dw / 2dy = canvasHeigth / 2 - dh / 2ctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-left': //右dx = canvasWidth - dw - this.ruleForm.distinctdy = canvasHeigth / 2 - dh / 2ctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-left-bottom': //左下dx = this.ruleForm.distinctdy = canvasHeigth  - this.ruleForm.distinct - dhctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-bottom': //下dx = canvasWidth / 2 - dw / 2dy = canvasHeigth  - this.ruleForm.distinct - dhctx.drawImage(img2, dx, dy,dw,dh);break;case 'icon-right_bottom': //右下dx = canvasWidth - dw - this.ruleForm.distinctdy = canvasHeigth  - this.ruleForm.distinct - dhctx.drawImage(img2, dx, dy,dw,dh);break;}},