思路：将两张图片绘制为一张
目标：输入的文字，绘制到图片上，简单实现图片水印
效果：输入的文字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(); //点击触发下载
}
文字水印可以加个drag 进行优化，拖拽调整位置，有时间我加上
以上就是图片合成的核心代码 很粗糙 但是我目前的思路就是这了
关于去除水印，我是这样想的：
第一种：
1: 点击图片（水印部分）获取当前点击点的色值
2: 将该点颜色替换为目标颜色（目标颜色可以自己手动设置、可以在页面加色卡 自定义选取，有点类似于ps）
第二种：
1: 点击图片（水印部分）获取当前点击点的色值
2: 选取图片内要替换颜色的区域
3: 将区域内同色值的点全部替换为目标颜色
我使用第一种方法时，遇到的问题是第2步中，替换颜色的时候，图片上没有办法添加颜色，鼠标点击的时候那个点的颜色会随着鼠标移动到下一个点走
跪求有这方面经验的大佬指点迷津啊
