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