如何用js和css给一个站内所有图片加上水印

如何用js和css给一个站内所有图片加上水印,第1张

<!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>

水印弄在图片上的方法:

打开美图app,首先在手机上找到并打开美图秀秀APP;

美化图片,在页面中所指处的“美化图片”;

点开文字

在页面中选择所指处的“文字”;

添加水印,在页面中选择处的“水印”,在图片上添加水印即可。

照片水印主要指的是现代的数字照片上面留下的一些logo、信息、网址什么的,图像,声音,视频信号等等在里面加了一些数字信息,这样是为了版权保护,当然加入水印也是不能影响原始文件的可读性以及观瞻的,水印具有以下几个特征,首先是证明各位是这个照片的原始主人,或者有的商家为了做宣传用,也会在照片上增加自己的网址,品牌名字等等。

批量给图片添加水印的方法,步骤请往下看:

步骤1,下载“水印工厂”软件工具后安装打开,软件左边有三个功能按钮,点击【图片水印】功能。然后再点击【添加文件】蓝色按钮,将需要添加水印的图片导入到软件中。

步骤2,然后进行水印设置,先选择水印类型(文字水印和图片水印两种),可以是多个也可以是单个;然后设置水印的内容/颜色/大小/透明度/旋转角度/字体/水印密度/位置等参数。在上方可以预览水印的样式,点击可以预览大图。

步骤3,如果预览后觉得没有问题,就可以点击【开始转换】按钮,启动软件程序了。所有图片添加完成后会自动打开一个文件夹,添加水印后的图片会全部保存到这里。

步骤4,从案例中可以看到,所有图片成功添加上了统一的水印。


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/bake/11911483.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-05-19
下一篇 2023-05-19

发表评论

登录后才能评论

评论列表(0条)

保存