基于canvas实现图片文字水印生成器

已于 2023-09-10 19:40:14 修改
阅读量531 收藏
点赞数 1
分类专栏： 前端 javascript 文章标签： 前端 javascript css
于 2023-09-10 11:10:54 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64642443/article/details/132788360
版权

介绍

在前端开发中时常会遇到需要给图片加上水印的功能，就像在创作csdn的文章时上传的图片都会打上传作者的水印，我们来探讨一下这个水印是如何生成的。

 首先生成的文字水印大概可以控制该文字的颜色、字体大小、以及水印的位置等

1.静态页面结构

我们就简单的搭一个水印生成器的静态页面

<!DOCTYPE html>
<html>

<head>
  <title>图片水印生成器</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #watermark {
      position: relative;
    }

    #downloadBtn {
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>图片水印生成器</h2>
    <input type="file" id="fileInput">
    <br>
    <label for="text">水印文字：</label>
    <input type="text" id="text">
    <br>
    <label for="size">文字大小：</label>
    <input type="number" id="size">
    <br>
    <label for="color">文字颜色：</label>
    <input type="color" id="color">
    <br>
    <label for="position">水印位置：</label>
    <select id="position">
      <option value="top-left">左上角</option>
      <option value="top-right">右上角</option>
      <option value="bottom-left">左下角</option>
      <option value="bottom-right">右下角</option>
      <option value="center">居中</option>
    </select>
    <br>
    <button id="generateBtn">生成水印</button>
    <a href="#" id="downloadBtn" download="watermarked_image.png">下载水印图片</a>
    <br>
    <img id="watermark" src="" alt="水印图片">
  </div>
</body>

</html>

静态页面大概是这个样子

接下来就是js代码

2.给生成水印按钮绑定点击事件

 首先要获取到生成水印的按钮给他绑定一个点击事件

  document.getElementById('generateBtn').addEventListener('click', generateWatermark);
    //点击后调用此函数生成水印

3.生成水印的函数

首先要获取到需要用到的值的dom

 const obj = {
        text: document.getElementById('text').value,
        size: document.getElementById('size').value,
        color: document.getElementById('color').value,
        position: document.getElementById('position').value
      }

读取用户上传的图片的文件

const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0];
const reader = new FileReader(); //获取一个FileReader对象，用于读取上传的图片文件。

绑定文件读取完后的触发的事件

reader.onload = (event) => { //当文件读取完成后触发
        const img = new Image(); //创建一个Image对象，用于加载上传的图片文件
        img.onload = () => { //当图片加载完成后触发
        const canvas = document.createElement('canvas');
        const ctx = canvas.getContext('2d');
        canvas.width = img.width; //canvas画布的width和height就是图片的宽和高
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0); //将上传的图片绘制到canvas上
        }
    };

这里就是利用canvas画布来构造，将画布的宽和高就设置为图片的大小，在将图片贴到canvas画布上

 接下来就是设置文字的大小、颜色、位置了

          ctx.font = obj.size + 'px Arial'; //设置canvas上文字的字体大小和颜色
          ctx.fillStyle = obj.color;
          console.log(obj.position);
          switch (obj.position) {
            case 'top-left':
              ctx.fillText(obj.text, 10, 30)
              break
            case 'top-right':
              ctx.fillText(obj.text, canvas.width - 10 - ctx.measureText(obj.text).width, 30)
              break
            case 'bottom-left':
              ctx.fillText(obj.text, 10, canvas.height - 10)
              break
            case 'bottom-right':
              ctx.fillText(obj.text, canvas.width - 10 - ctx.measureText(obj.text).width, canvas.height - 10)
              break
            case 'center':
              const textWidth = ctx.measureText(obj.text).width
              const textHeight = 20 // Assuming font size is 20px
              const centerX = (canvas.width - textWidth) / 2
              const centerY = (canvas.height + textHeight) / 2
              ctx.fillText(obj.text, centerX, centerY)
              break
          }

我的文字位置就设置了四个角落以及中间，这个位置可以根据实际情况决定

文字的位置计算方法也是用了ctx.measureText()

关键代码是将文字贴到图片上

ctx.fillText(obj.text, centerX, centerY)

最后就是将最开始的img标签改变它的src属性，让其显示出来，以及提供下载按钮显示

const watermarkedImage = new Image();
          //将canvas转换为DataURL，以便稍后使用。
          watermarkedImage.src = canvas.toDataURL();
          //将水印图片的src属性设置为canvas转换后的DataURL
          document.getElementById('watermark').src = watermarkedImage.src;
          //将下载按钮的display属性设置为'inline-block'，以便在canvas下方显示用于下载图片
          document.getElementById('downloadBtn').href = watermarkedImage.src;
          document.getElementById('downloadBtn').style.display = 'inline-block';
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(file);

现在就可以上传图片生成水印了

也可以提供下载功能

4.完整代码

<!DOCTYPE html>
<html>

<head>
  <title>图片水印生成器</title>
  <style>
    .container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    #watermark {
      position: relative;
    }

    li {
      list-style: none;
    }


    #downloadBtn {
      margin-top: 10px;
      padding: 5px 10px;
      background-color: #4CAF50;
      color: white;
      border: none;
      cursor: pointer;
      display: none;
    }
  </style>
</head>

<body>
  <div class="container">
    <h2>图片水印生成器</h2>
    <input type="file" id="fileInput">
    <br>
    <label for="text">水印文字：</label>
    <input type="text" id="text">
    <br>
    <label for="size">文字大小：</label>
    <input type="number" id="size">
    <br>
    <label for="color">文字颜色：</label>
    <input type="color" id="color">
    <br>
    <label for="position">水印位置：</label>
    <select id="position">
      <option value="top-left">左上角</option>
      <option value="top-right">右上角</option>
      <option value="bottom-left">左下角</option>
      <option value="bottom-right">右下角</option>
      <option value="center">居中</option>
    </select>
    <br>
    <button id="generateBtn">生成水印</button>
    <a href="#" id="downloadBtn" download="watermarked_image.png">下载水印图片</a>
    <br>
    <img id="watermark" src="" alt="水印图片">
  </div>

  <script>
    document.getElementById('generateBtn').addEventListener('click', generateWatermark);
    //点击后调用此函数生成水印

    function generateWatermark() {
      //获取到input框中的一些值
      const obj = {
        text: document.getElementById('text').value,
        size: document.getElementById('size').value,
        color: document.getElementById('color').value,
        position: document.getElementById('position').value
      }
      const fileInput = document.getElementById('fileInput');
      const file = fileInput.files[0];
      const reader = new FileReader(); //获取一个FileReader对象，用于读取上传的图片文件。

      reader.onload = (event) => { //当文件读取完成后触发
        const img = new Image(); //创建一个Image对象，用于加载上传的图片文件
        img.onload = () => { //当图片加载完成后触发
          const canvas = document.createElement('canvas');
          const ctx = canvas.getContext('2d');
          canvas.width = img.width; //canvas画布的width和height就是图片的宽和高
          canvas.height = img.height;
          ctx.drawImage(img, 0, 0); //将上传的图片绘制到canvas上

          ctx.font = obj.size + 'px Arial'; //设置canvas上文字的字体大小和颜色
          ctx.fillStyle = obj.color;
          console.log(obj.position);
          switch (obj.position) {
            case 'top-left':
              ctx.fillText(obj.text, 10, 30)
              break
            case 'top-right':
              ctx.fillText(obj.text, canvas.width - 10 - ctx.measureText(obj.text).width, 30)
              break
            case 'bottom-left':
              ctx.fillText(obj.text, 10, canvas.height - 10)
              break
            case 'bottom-right':
              ctx.fillText(obj.text, canvas.width - 10 - ctx.measureText(obj.text).width, canvas.height - 10)
              break
            case 'center':
              const textWidth = ctx.measureText(obj.text).width
              const textHeight = 20 // Assuming font size is 20px
              const centerX = (canvas.width - textWidth) / 2
              const centerY = (canvas.height + textHeight) / 2
              ctx.fillText(obj.text, centerX, centerY)
              break
          }
          // ctx.fillText(obj.text, 30, 30);

          const watermarkedImage = new Image();
          //将canvas转换为DataURL，以便稍后使用。
          watermarkedImage.src = canvas.toDataURL();
          //将水印图片的src属性设置为canvas转换后的DataURL
          document.getElementById('watermark').src = watermarkedImage.src;
          //将下载按钮的display属性设置为'inline-block'，以便在canvas下方显示用于下载图片
          document.getElementById('downloadBtn').href = watermarkedImage.src;
          document.getElementById('downloadBtn').style.display = 'inline-block';
        };
        img.src = event.target.result;
      };
      reader.readAsDataURL(file);
    }
  </script>
</body>

</html>

总结

主要的核心逻辑其实也很简单，就是使用canvas画布将图片贴到画布上，然后设置文字水印的颜色，字体大小等属性，将其贴到canvas画布对应的位置上，最后改变原来的img的src属性进行展示水印图片。

Lee哈
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
html2canvas将HTML内容写入Canvas生成图片 uniapp
12-16
html2canvas 能够实现在浏览器端、app端直接对整个或部分页面进行截屏。这个html2canvas脚本将当页面渲染成一个canvas图片，通过读取DOM并将不同的样式应用到这些元素上实现。
一个基于canvas的移动端图片编辑器的实现
01-18
项目地址： https://github.com/xiaosu95/canvas_mobile_drag 点击查看demo（在移动端上查看） 该插件是一款脱离jq的移动端图片编辑器。可以应用在移动端H5页面或者微信小程序中。 插件实现的功能为可页面内初始化载入图片、手动添加手机相册内的图片、或者添加服务器端的图片（服务器端需要开启允许图片跨域）。拥有多种的编辑模式。支持操作画布内的所有图片和单独设置某一种图片的状态或者位置等。 插件操作模式支持手势放大、旋转；支持点击图片的四个角落拖拽放大或旋转或者。 支持照片exif自动矫正。许多手机用不同方向拍照时会导致图片在can
【日常记录】【插件】使用 html2canvas增加水印
呆呆狗
03-19 998
使用 html2canvas 给图片增加水印;把 DOM结构转成图片
vue2 图片上传加水印
贩梦的博客
04-06 572
最开始的上传图片是直接用element-ui 组件 Upload 进行上传加图片但是对于element-ui了解不够透彻无法实现 这里选用 input + html2canvas 进行上传截取添加水印。
前端vue基于html2canva jspdf 实现前端页面加水印 并导出页面PDF
chenchuang0128的博客
05-31 3266
view class="exportPdfBtn" @click="downKcReport()">导出PDF//如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔。watermark_fontsize: '14px', //水印字体大小。watermark_y_space: 102, //水印y轴间隔。watermark_x_space: 80, //水印x轴间隔。watermark_font: '微软雅黑', //水印字体。
html2canvas给图片添加水印,小程序用Canvas给图片加水印，拼接图片，制作名片
weixin_35866960的博客
06-04 1012
Canvas是微信小程序中的一个原生组件，因此我们在使用它的时候要特别注意微信小程序对原生组件的使用说明。canvas这个组件其实就是一个画布，你可以在上面画很多你用其他方式不好实现的内容。下面我就将介绍一下怎么给图片添加水印，图片的拼接，怎么制作个性名片以及制作一个涂鸦的画板。水印水印的添加总的来说可以简单的分为三步来走，第一步先完成一个画布的创建，第二步在画板上画出你想添加水印的图片，第三步画...
html2canvas 网页对图片加水印
03-06
html2canvas 网页对图片加水印
canvas实现水印效果
老白干的zone
07-17 3872
canvas两种实现水印效果
canvas实现水印
qq_58355643的博客
10-26 409
canvas实现水印
前端水印生成方案(网页水印+图片水印)
油墨香^-^的博客
03-03 1971
安全问题不能大意，对于一些比较敏感的内容，我们可以通过组合使用上述的水印方案，这样才能最大程度给浏览者警示的作用，减少泄密的情况，即使泄密了,也有可能追踪到泄密者。
html5 canvas实现给图片添加平铺水印
12-14
首先想到的是用canvas完成这种功能，因为我之前也没有接触过canvas，所以做这个功能的时候，就是一步一步的摸索中学习，过程还是挺nice的，接下来跟我一步步来实现这个功能以及发现一些canvas的坑吧。 因为这个功能...
JS前端基于canvas给图片添加水印
01-18
本文简单记录一下借助canvas在前端实现图片添加水印的实现方法。 canvas元素其实就是一个画布，我们可以很方便地绘制一些文字、线条、图形等，它也可以将一个img标签里渲染的图片画在画布上。 在上传文件到后端的...
Python基于tkinter canvas实现图片裁剪功能
01-19
实现：tkinter 画布上显示图片，按下鼠标左键并且移动，实现截图 代码如下 # -*- encoding=utf-8 -*- import os import tkinter as tk from PIL import Image from PIL import ImageTk left_mouse_down_x = 0 left_...
基于cropperjs和canvas实现的图片裁剪
08-28
基于cropperjs和canvas实现的图片裁剪
【前端】数组的常用处理函数
lcukyNwa的博客
04-22 416
item------->每个元素值 (必)index----->索引（可选）arr-------- >当前数组（可选）推荐vscode的一款插件来写以下的demo，该插件可以直接在js文件中显示结果，搜 Quokka.js用这个插件去新建一个js文件，直接就运行在node上了forEach不会返回一个新的数组，里面改值会影响原数组，其他方法不影响原数组map可以返回新数组 用于映射，如每个元素都加倍或执行其他转换操作every返回一布尔值，需数组中全部满足。
SpringBoot项目打包分离高阶操作
Record Little
04-23 622
虽然传输jar包 比较大，但是安全性、稳定性比较高，不需要关注pom.xml 添加了新的依赖、更新了版本号等等影响版本功能的操作。关注maven的特性， profiles即可满足， 根据不同的activation 状态，激活不同的build操作。每次修改一小部分代码或仅仅更新某个依赖jar包时，都需要重新进行整个项目的构建、打包、上传和部署。但是当你的项目趋于稳定，只有业务上的逻辑变更时，如果使用分离版本，可以加快迭代、更新的速度。弊端： 需要配置IDE命令，修改依赖时需要同时修改2处。
webman 事务回滚失效问题记录
juan9872的博客
04-21 790
webman是一款基于workerman开发的高性能HTTP服务框架。webman用于替代传统的php-fpm架构，提供超高性能可扩展的HTTP服务。你可以用webman开发网站，也可以开发HTTP接口或者微服务。除此之外，webman还支持自定义进程，可以做workerman能做的任何事情，例如websocket服务、物联网、游戏、TCP服务、UDP服务、unix socket服务等等。
vue实现录音并转文字功能，包括PC端web，手机端web
最新发布
byebukesi的博客
04-26 384
不止vue，不限技术栈，vue2、vue3、react、.net以及原生js均可实现。
html2canvas页面生成图片并平铺文字水印
06-06
您可以使用 `fillText` 方法在 Canvas 上填充文字，并使用 `globalAlpha` 属性来设置文字透明度，从而实现平铺文字水印的效果。 3. 将 Canvas 元素转换为图片并下载，可以使用 Canvas API 中的 `toDataURL` 方法将 ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Lee哈

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值