2016年3月9日 星期三

在網頁圖片上自動疊加文字或圖形、可當浮水印 ( baivong watermark JQuery Script )

0

來源:http://baivong.github.io/watermark/

限制:
  • 觀看者之瀏覽器需支援HTML5 (太舊的版本不行)
  • 可能受限於網站主機/圖片來源主機之設定而失效 
可以疊加文字、也可疊加圖形。
但兩者不能並用,jquery.watermark.js中的text參數(文字內容)中若有值、path參數(圖片路徑)就會失效。

設定大致步驟如下:
  • 網頁中想要加入此效果的圖片img Tag裡,加上類似class="img_awesome" 
  • 修改watermarks.js中的相關值 :
  • var pluginName = 'watermark',
            defaults = {
                path: '', //用來疊加之圖片的路徑
    
                text: '卡羅的練習場', //要疊加的文字
                textWidth: 130, //寬度
                textSize: 14, //字形大小
                textColor: 'white',//字體顏色
                textBg: 'rgba(0, 0, 0, 0.4)', //文字的背景框底色
    
                gravity: 'se', //放在圖片的那個位置 nw=西北 | n=北 | ne=東北 | w=西 | e=東 | sw=西南 | s=南 | se=東南
                opacity: 0.7, //透明度
                margin: 10, // 邊距
    
                outputWidth: 'auto', // 處理過後的圖片尺寸高度
                outputHeight: 'auto',// 處理過後的圖片尺寸高度
                outputType: 'jpeg', // jpeg | png | webp// 處理過後的圖片輸出格式
       
  • 把下述程式碼放在網頁最後(body內)






原本圖片:


疊加效果:


另一個方法看起來也不錯: http://www.patrick-wied.at/static/watermarkjs/ 

但此作者也提到:

The purpose of watermark.js is to protect images, served from your website from copying without a mark. It's not a real image protection, because if you get the document at the initial state you'll be able to read the srces but a normal user wont get it ;) watermark.js is not limited to "image-protection" only, but you could also place a little identifier or a picture of you in your images 

(要當作浮水印來用也可以,但是只能防新手不能防高手XD)

0 意見:

張貼留言

歡迎分享本文~