标签：tar 简单实现 图片加水印 垃圾 自定义 简单 eve 回调 v-model
思路：将两张图片绘制为一张
目标：输入的文字，绘制到图片上，简单实现图片水印
效果：输入的文字1: ‘你猜猜’ + 图片2 = 图片3（不要看清除水印的按钮，本人垃圾 没实现）
html
<input type="file" id="uploadFile" class="clip" accept="image/*" @change="chooseImg">
js
// 上传图片 chooseImg(event) { var file = event.target.files[0]; var reader = new FileReader(); reader.readAsDataURL(file); let _this = this; reader.onload = function() { _this.imgsrc = reader.result; }; _this.imgsrc = file; }
html
<input type="text" placeholder="请输入你要添加的水印文字" class="water-text" v-model="text" @change="conformText()">
js
//生成水印文字 canvas文字你可以设置为你喜欢的样式 conformText() { var canvas = document.createElement(‘canvas‘) //准备空画布 var ctx = canvas.getContext("2d") ctx.font = "20px Georgia" //canvas字体 ctx.fillText(this.text, 10, 50) var gradient = ctx.createLinearGradient(0, 0, canvas.width, 0) gradient.addColorStop("0", "magenta") gradient.addColorStop("0.5", "blue") gradient.addColorStop("1.0", "red") ctx.fillStyle = gradient this.imgTextUrl = canvas.toDataURL("image/png") }
html
<img id="imgsrc" :src="imgsrc" :width="size"> <img id="imgTextUrl" :src="imgTextUrl" :width="size"> <img id="imgUploadUrl" :src="imgUploadUrl" @click="downLoad()"> <div class="conform" @click="confirmImg()">合成图片</div>
js
// 合成图片 confirmImg(url) { var canvasAll = document.createElement(‘canvas‘) const size = 180 canvasAll.width = this.size canvasAll.height = this.size var context = canvasAll.getContext(‘2d‘) // 这是上传图像 var imgUpload = new Image(); var img1 = document.getElementById(‘imgsrc‘) var img2 = document.getElementById(‘imgTextUrl‘) const that = this imgUpload.onload = function() { // 绘制 context.drawImage(img1, 0, 0, img1.width, img1.height); // 再次绘制 context.drawImage(img2, 0, 130, img2.width, img2.height); // 回调 that.imgUploadUrl = canvasAll.toDataURL(‘image/png‘) } imgUpload.src = url; }
js
downLoad() { var a = document.createElement(‘a‘); a.href = this.imgUploadUrl //将画布内的信息导出为png图片数据 a.download = ‘水印图片‘; //设定下载名称 如果不设置a.download 浏览器会尝试打开这张图片 而图片会下载失败 a.click(); //点击触发下载 }
以上就是图片合成的核心代码 很粗糙 但是我目前的思路就是这了
关于去除水印，我是这样想的：
第一种：
1: 点击图片（水印部分）获取当前点击点的色值
2: 将该点颜色替换为目标颜色（目标颜色可以自己手动设置、可以在页面加色卡 自定义选取，有点类似于ps）
第二种：
1: 点击图片（水印部分）获取当前点击点的色值
2: 选取图片内要替换颜色的区域
3: 将区域内同色值的点全部替换为目标颜色
我使用第一种方法时，遇到的问题是第2步中，替换颜色的时候，图片上没有办法添加颜色，鼠标点击的时候那个点的颜色会随着鼠标移动到下一个点走
跪求有这方面经验的大佬指点迷津啊
标签：tar 简单实现 图片加水印 垃圾 自定义 简单 eve 回调 v-model
原文地址：https://www.cnblogs.com/tongjiaojiao/p/12185872.html
