您的位置:首页 - 教程 - 网页特效 - 正文
jQuery为页面上的图片加水印
JS脚本(jQuery)为图片加水印效果预览:
http://hovertree.com/texiao/jquery/94/

本功能使用HTML5实现,可为图片加上文字水印,可设置文字,设置颜色,位置等,加水印的图片需和网页在同个域名下。

完整代码如下:
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>jQuery图片自动添加水印插件 - 何问起</title>
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/94/css/normalize.css" />
<link rel="stylesheet" type="text/css" href="http://hovertree.com/texiao/jquery/94/css/demo.css" />
</head>
<body>

<div class="zzsc-content">
<h3>默认图片</h3>
<img class="sample1" data-img2blob="img/1.png" />
<img class="sample1" data-img2blob="img/2.jpg" />

<hr />

<h3>添加水印之后的图片</h3>
<img class="sample2" data-img2blob="img/1.png" />
<img class="sample2" data-img2blob="img/2.jpg" />

<h3>原图</h3>
<img src="http://hovertree.com/texiao/jquery/94/img/1.png" />
<img src="http://hovertree.com/texiao/jquery/94/img/2.jpg" />
</div>

<script src="http://down.hovertree.com/jquery/jquery-1.12.4.min.js" type="text/javascript"></script>
<script src="http://hovertree.com/texiao/jquery/94/js/img2blob.js" type="text/javascript"></script>
<script type="text/javascript">
$(function() {

// default
$(".sample1").img2blob();

// with watermark
$(".sample2").img2blob({
watermark: '@何问起',
fontStyle: 'Microsoft YaHei,Arial',
fontSize: '30', // px
fontColor: 'red', // default 'black'
fontX: 20, // The x coordinate where to start painting the text
fontY: 40 // The y coordinate where to start painting the text
});

});
</script>

<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
<p>适用浏览器:FireFox、Chrome、Opera、傲游、搜狗、360、世界之窗. 不支持Safari、E8及以下浏览器。</p>
<p>来源:<a href="http://hovertree.com/" target="_blank">何问起</a> <a href="http://hovertree.com/h/bjag/kfq30wnj.htm" target="_blank">说明</a></p>
</div>
</body>
</html>
源码下载:http://hovertree.com/h/bjag/vgp0pyov.htm

评论: