步骤1，下载上面的工具软件后安装打开，软件左边有三个功能按钮，点击【图片水印】功能。然后再点击【添加文件】蓝色按钮，将需要添加水印的图片导入到软件中。
步骤2，然后进行水印设置，先选择水印类型（文字水印和图片水印两种），可以是多个也可以是单个；然后设置水印的内容/颜色/大小/透明度/旋转角度/字体/水印密度/位置等参数。在上方可以预览水印的样式，点击可以预览大图。
步骤3，如果预览后觉得没有问题，就可以点击【开始转换】按钮，启动软件程序了。所有图片添加完成后会自动打开一个文件夹，添加水印后的图片会全部保存到这里。
步骤4，从案例中可以看到，所有图片成功添加上了统一的水印。
图片批量添加水印的方法：
步骤1，下载上面的工具软件后安装打开，点击左边第一个【图片水印】功能，进入下一步 *** 作。
步骤2，然后点击【添加文件】按钮，将需要添加水印的图片文件全部导入到软件中，软件可以一次性批量给很多图片加logo水印，提高效率。
步骤3，导入图片后就进行设置，如下图所示：水印类型选择“图片水印”（也可以选择“文字水印”），然后上传水印logo图片，最后设置logo水印的透明度/大小比例/位置等参数，上面可以随时预览到加水印后的样子。
步骤4，设置好了后就点击【开始转换】按钮，启动软件 *** 作程序。随后软件会自动d开一个文件夹，所有添加logo水印后的图片会全部保存到这里。
步骤5，查看处理后图片可以看到，全部成功的添加上了logo水印。
<!DOCTYPE html><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>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）