大连h5网站建设自己制作app的应用程序

用户需求，双击编辑器中的图片的时候，出现弹框，用户可以选择水印缩放倍数、距离以及水印所放置的方位（当然有很多水印插件，位置大小透明度用户都能够自定义，但是用户需求如此，就自己写了）

编辑器内部已经实现了一个方法，点击图片的时候，图片四周会出现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;}},