vue + canvas 图片加水印

Posted 2021-03-16 tongjiaojiao

思路：将两张图片绘制为一张

目标：输入的文字，绘制到图片上，简单实现图片水印

效果：输入的文字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步中，替换颜色的时候，图片上没有办法添加颜色，鼠标点击的时候那个点的颜色会随着鼠标移动到下一个点走 

跪求有这方面经验的大佬指点迷津啊