<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.str {
font: normal bold 5px Arial
/*font-size: 5px*/
color: rgb(224, 226, 226,0.4)
position: absolute
padding-left: 16px
padding-top: 53px
display: none
}
.str2 {
font: normal bold 5px Arial
/* font-size: 5px*/
color: rgb(224, 226, 226,0.4)
position: absolute
padding-left: 66px
padding-top: 130px
display: none
}
</style>
</head>
<body>
<div>HOMEANGEL</div>
<div>HOMEANGEL</div>
<img src="https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg" style="width:100pxheight:100px" />
<div id="picture" style="width:100%margin-left: 60px">
</div>
<script>
$(function () {
var img = ["https://dss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3252521864,872614242&fm=26&gp=0.jpg"]
GetCanvas(img)
})
function AddCanvas(src, ById) {
var img = new Image()
img.src = src
img.onload = function () {
imgW = img.width
imgH = img.height
//准备canvas环境
var canvas = document.getElementById(ById)
canvas.width = img.width
canvas.height = img.height
var ctx = canvas.getContext("2d")
// 绘制图片
ctx.drawImage(img, 0, 0, img.width, img.height)
// 绘制水印
ctx.font = "20px bold Arial"
ctx.fillStyle = "rgb(224, 226, 226,0.6)"//这里是颜色
ctx.fillText("watermark watermark", 20, 60)
ctx.fillText("watermark watermark", 120, 160)
ctx.fillText("watermark watermark", 220, 220)
//ctx.fillText("HOMEANGEL", 90, 130)
canvas.style.width = "100px"
canvas.style.height = "100px"
}
}
function GetCanvas(Strhtml) {
if (Strhtml.length >0 &&Strhtml != "") {
var html = ""
for (var i = 0i <Strhtml.lengthi++) {
var str = "sample" + (i + 1)
html += ' <canvas id=' + str + ' name="test" src=' + Strhtml[i] + ' "></canvas>'
}
$("#picture").html(html)//这里图片添加到html，然后for，添加水印
}
for (var i = 0i <Strimg.lengthi++) {
var str = "sample" + (i + 1)
var src = Strhtml[i]
AddCanvas(src, str)//id没传递
}
}
</script>
</body>
加水印: 这是一个用Photoshop的图层模式规则重复水印的方法，效果挺不错，而且也不复杂。天极设计在线特别提醒：本例的关键操作是水印取样和图层模式的运用。 1、用Photoshop打开要去掉水印的图片。 2、按快捷键M 切换到选择工具。 3、按着鼠标拖动选择要去掉的水印。 4、按快捷键 Ctrl+J 把第三步选择的水印建立一个新的图层。 5、移动新建的图层可见水印图层 6、再选择图层模式为颜色减淡。 7、再按快捷键 Ctrl+i 把图层改为反相状态 8、移动水印图层对准底图上的水印即可完成 9、复制水印图层复盖底图的水印就可去除所有水印 去水印: 选择仿制图章工具 ，并在选项栏中执行下列操作： 选取画笔和设置画笔选项。（请参阅使用画笔。） 指定混合模式、不透明度和流量。（请参阅设置绘画和编辑工具的选项。） 确定想要对齐样本像素的方式。如果选择“对齐的”，您可以松开鼠标按钮，当前的取样点不会丢失。这样，无论您多少次停止和继续绘画，都可以连续应用样本像素。如果取消选择“对齐的”，则每次停止和继续绘画时，都将从初始取样点开始应用样本像素。 选择“用于所有图层”可以从所有可视图层对数据进行取样；取消选择“用于所有图层”将只从现用图层取样。 通过在任意打开的图像中定位指针，然后按住 Alt 键并点按 (Windows) 或按住 Option 键并点按 (Mac OS) 来设置取样点。 注释：如果要从一幅图像中取样并应用到另一图像，则这两幅图像的颜色模式必须相同。 在图像中拖移。 图案图章工具使您可以用图案绘画。可以从图案库中选择图案或者创建您自己的图案。首先，确保你本地已经安装好了node环境。然后，我们进行图像编辑操作需要用到一个Node.js的库：images。
这个库的地址是：https://github.com/zhangyuanwei/node-images，作者定义它为 “Node.js轻量级跨平台图像编解码库” ，并提供了一系列接口。
我们要做的首先是安装images库：
