在前端给图片加水印的方法有很多种：
法一：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实习生一枚，不断学习，不断进步，欢迎各位前辈批评指教。
8994
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
