JS腳本(jQuery)為圖片加水印效果預覽：http://hovertree.com/texiao/jquery/94/本功能使用HTML5實現，可為圖片加上文字水印，可設置文字，設置顏色，位置等，加水印的圖片需和網頁在同個功能變數名稱下。完整代碼如下： 源碼下載：http://hovertree.com ...
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
推薦：http://www.cnblogs.com/jihua/p/webfront.html
