zoukankan      html  css  js  c++  java
  • 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(); //点击触发下载
          }

    文字水印可以加个drag 进行优化,拖拽调整位置,有时间我加上

    以上就是图片合成的核心代码 很粗糙 但是我目前的思路就是这了

    关于去除水印,我是这样想的:

    第一种:

    1: 点击图片(水印部分)获取当前点击点的色值

    2: 将该点颜色替换为目标颜色(目标颜色可以自己手动设置、可以在页面加色卡 自定义选取,有点类似于ps)

    第二种:

    1: 点击图片(水印部分)获取当前点击点的色值

    2: 选取图片内要替换颜色的区域

    3: 将区域内同色值的点全部替换为目标颜色

    我使用第一种方法时,遇到的问题是第2步中,替换颜色的时候,图片上没有办法添加颜色,鼠标点击的时候那个点的颜色会随着鼠标移动到下一个点走 

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

  • 相关阅读:
    JS算法练习一
    jquery抖动的按钮
    CSS3教程:box-sizing属性的理解border、padding与容器宽度的关系
    鼠标hover事件
    object 插入元素,插入HTML页面
    点击展开点击收起
    IE支持CSS3圆角
    登录事件,鼠标点击输入框隐藏默认值事件
    复制 动态文本按钮
    凯撒密码、GDP格式化输出、99乘法表
  • 原文地址:https://www.cnblogs.com/tongjiaojiao/p/12185872.html
Copyright © 2011-2022 走看看