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>