web图片加水印

最新推荐文章于 2024-05-21 17:14:27 发布

约嫦娥烤兔子

最新推荐文章于 2024-05-21 17:14:27 发布

阅读量809

点赞数

分类专栏： node JS 文章标签： node 加水印 js canvas

JS 同时被 2 个专栏收录

8 篇文章 1 订阅

订阅专栏

node

0 篇文章 0 订阅

订阅专栏

在前端给图片加水印的方法有很多种：

法一：js+canvas，使用H5新增元素canvas（画布）加水印。

使用此方法，用户可以在页面上自定义水印内容。

代码如下：

<body>
	<canvas id="shuiyinTest" width="500" height="500"></canvas>
        <!--画布，图片放在此处-->
	<div>
	    <input id="shuiyinText" value="" type="text" />
	    <button id="shuiyinBtn" type="button"> 点击添加水印</button>
	</div>
</body>
<script>
     //加水印方法，参数1：画布;参数2：图片
     function shuiyin(canvasid, imgurl) {
         var img = new Image;//定义一个图片
         img.src = imgurl;//获取图片
         img.onload = function() {//图片被加载到页面时执行
             var canvas = document.getElementById(canvasid);//通过id寻找canvas元素
             var ctx = canvas.getContext("2d");//创建context对象
             ctx.drawImage(img, 0, 0);//将图片放到画布上，从左上角(0,0)开始
             ctx.font = "14px 微软雅黑";//水印的字号,字体
             ctx.fillStyle = "rgba(252,255,255,0.8)"; //水印的颜色
             //按钮被点击时执行
            document.getElementById("shuiyinBtn").onclick = function() {
                //获取用户输入的值
	        var addtext = document.getElementById("shuiyinText").value;
                ctx.fillText(addtext, 10, 50); //选择位置,添加水印
            }
         }
     }
     //执行函数，传入画布id和图片
     shuiyin("shuiyinTest", "source.png");
</script>

页面效果如下：

法二：node，使用node.js给图片加水印。

此方法类似于将一个图片叠加到另一个图片上。

（1）准备工作：

首先，确保你本地已经安装好了node环境。

然后，我们进行图像编辑操作需要用到一个Node.js的库：images。这个库的地址是：https://github.com/zhangyuanwei/node-images，作者定义它为 “Node.js轻量级跨平台图像编解码库” ，并提供了一系列接口。

我们要做的首先是安装images库：打开命令行并定位到项目所在处，并输入代码如下：

 npm install images

项目文件夹结构如下：

其中node_modules中包含了下载的images库；jiashuiyin.js中是主要代码；source.png为原图片；water_logo.png为水印内容。

（2）代码：

jiashuiyin.js中的代码如下：

var images = require('images');
var path = require('path');
var watermarkImg = images('water_logo.png');
var sourceImg = images('source.png');
// 比如放置在右下角，先获取原图的尺寸和水印图片尺寸
var sWidth = sourceImg.width();
var sHeight = sourceImg.height();
var wmWidth = watermarkImg.width();
var wmHeight = watermarkImg.height();
images(sourceImg)
// 设置绘制的坐标位置，右下角距离 40px
.draw(watermarkImg, sWidth - wmWidth - 40, sHeight - wmHeight - 40)
// 保存格式会自动识别
.save('saveimg.png');

（3）运行jiashuiyin.js

在此项目文件夹处打开命令行，输入node jiashuiyin.js；回车。此时，文件夹中会多一个saveimg.png图片，此图片就是加水印后的图片。

注：本人为JS实习生一枚，不断学习，不断进步，欢迎各位前辈批评指教。