vue + canvas 图片加水印

Posted tongjiaojiao

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue + canvas 图片加水印相关的知识,希望对你有一定的参考价值。

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

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

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

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

以上是关于vue + canvas 图片加水印的主要内容,如果未能解决你的问题,请参考以下文章

《VUE》怎么添加水印?添加水印方法图解

html5 canvas+原生javascript 实时获取文本框内容绘制图片水印

uniapp 加图片水印示例

前端小程序——js+canvas 给图片添加水印

Android给图片添加文字和水印

WaterMark.js给网页加水印