图片网页水印系列

1、java图片处理 (文字水印、图片水印、缩放、补白)

package com.hmw.picMark;

import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.IOException;

import javax.imageio.ImageIO;

/**
 * 图片工具类， 图片水印，文字水印，缩放，补白等
 * @author Carl He
 */
public final class ImageUtils {
    /**图片格式：JPG*/
    private static final String PICTRUE_FORMATE_JPG = "jpg";
    
    private ImageUtils(){}
    /**
     * 添加图片水印
     * @param targetImg 目标图片路径，如：C://myPictrue//1.jpg
     * @param waterImg  水印图片路径，如：C://myPictrue//logo.png
     * @param x 水印图片距离目标图片左侧的偏移量，如果x<0, 则在正中间
     * @param y 水印图片距离目标图片上侧的偏移量，如果y<0, 则在正中间
     * @param alpha 透明度(0.0 -- 1.0, 0.0为完全透明，1.0为完全不透明)
*/
    public final static void pressImage(String targetImg, String waterImg, int x, int y, float alpha) {
            try {
                File file = new File(targetImg);
                Image image = ImageIO.read(file);
                int width = image.getWidth(null);
                int height = image.getHeight(null);
                BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
                Graphics2D g = bufferedImage.createGraphics();
                g.drawImage(image, 0, 0, width, height, null);
            
                Image waterImage = ImageIO.read(new File(waterImg));    // 水印文件
                int width_1 = waterImage.getWidth(null);
                int height_1 = waterImage.getHeight(null);
                g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, alpha));
                
                int widthDiff = width - width_1;
                int heightDiff = height - height_1;
                if(x < 0){
                    x = widthDiff / 2;
                }else if(x > widthDiff){
                    x = widthDiff;
                }
                if(y < 0){
                    y = heightDiff / 2;
                }else if(y > heightDiff){
                    y = heightDiff;
                }
                g.drawImage(waterImage, x, y, width_1, height_1, null); // 水印文件结束
                g.dispose();
                ImageIO.write(bufferedImage, PICTRUE_FORMATE_JPG, file);
            } catch (IOException e) {
                e.printStackTrace();
            }
    }

    /**
     * 添加文字水印
     * @param targetImg 目标图片路径，如：C://myPictrue//1.jpg
     * @param pressText 水印文字， 如：中国证券网
     * @param fontName 字体名称，    如：宋体
     * @param fontStyle 字体样式，如：粗体和斜体(Font.BOLD|Font.ITALIC)
     * @param fontSize 字体大小，单位为像素
     * @param color 字体颜色
     * @param x 水印文字距离目标图片左侧的偏移量，如果x<0, 则在正中间
     * @param y 水印文字距离目标图片上侧的偏移量，如果y<0, 则在正中间
     * @param alpha 透明度(0.0 -- 1.0, 0.0为完全透明，1.0为完全不透明)
*/
    public static void pressText(String targetImg, String pressText, String fontName, int fontStyle, int fontSize, Color color, int x, int y, float alpha) {
        try {
            File file = new File(targetImg);
            
            Image image = ImageIO.read(file);
            int width = image.getWidth(null);
            int height = image.getHeight(null);
            BufferedImage bufferedImage = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
            Graphics2D g = bufferedImage.createGraphics();
            g.drawImage(image, 0, 0, width, height, null);
            g.setFont(new Font(fontName, fontStyle, fontSize));
            g.setColor(color);
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP, alpha));
            
            int width_1 = fontSize * getLength(pressText);
            int height_1 = fontSize;
            int widthDiff = width - width_1;
            int heightDiff = height - height_1;
            if(x < 0){
                x = widthDiff / 2;
            }else if(x > widthDiff){
                x = widthDiff;
            }
            if(y < 0){
                y = heightDiff / 2;
            }else if(y > heightDiff){
                y = heightDiff;
            }
            
            g.drawString(pressText, x, y + height_1);
            g.dispose();
            ImageIO.write(bufferedImage, PICTRUE_FORMATE_JPG, file);
        } catch (Exception e) {
            e.printStackTrace();
        }
    }
    
    /**
     * 获取字符长度，一个汉字作为 1 个字符, 一个英文字母作为 0.5 个字符
     * @param text
     * @return 字符长度，如：text="中国",返回 2；text="test",返回 2；text="中国ABC",返回 4.
*/
    public static int getLength(String text) {
        int textLength = text.length();
        int length = textLength;
        for (int i = 0; i < textLength; i++) {
            if (String.valueOf(text.charAt(i)).getBytes().length > 1) {
                length++;
            }
        }
        return (length % 2 == 0) ? length / 2 : length / 2 + 1;
    }

    /**
     * 图片缩放
     * @param filePath 图片路径
     * @param height 高度
     * @param width 宽度
     * @param bb 比例不对时是否需要补白
*/
    public static void resize(String filePath, int height, int width, boolean bb) {
        try {
            double ratio = 0; //缩放比例    
            File f = new File(filePath);   
            BufferedImage bi = ImageIO.read(f);   
            Image itemp = bi.getScaledInstance(width, height, BufferedImage.SCALE_SMOOTH);   
            //计算比例   
            if ((bi.getHeight() > height) || (bi.getWidth() > width)) {   
                if (bi.getHeight() > bi.getWidth()) {   
                    ratio = (new Integer(height)).doubleValue() / bi.getHeight();   
                } else {   
                    ratio = (new Integer(width)).doubleValue() / bi.getWidth();   
                }   
                AffineTransformOp op = new AffineTransformOp(AffineTransform.getScaleInstance(ratio, ratio), null);   
                itemp = op.filter(bi, null);   
            }   
            if (bb) {   
                BufferedImage image = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);   
                Graphics2D g = image.createGraphics();   
                g.setColor(Color.white);   
                g.fillRect(0, 0, width, height);   
                if (width == itemp.getWidth(null))   
                    g.drawImage(itemp, 0, (height - itemp.getHeight(null)) / 2, itemp.getWidth(null), itemp.getHeight(null), Color.white, null);   
                else  
                    g.drawImage(itemp, (width - itemp.getWidth(null)) / 2, 0, itemp.getWidth(null), itemp.getHeight(null), Color.white, null);   
                g.dispose();   
                itemp = image;   
            }
            ImageIO.write((BufferedImage) itemp, "jpg", f);   
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    public static void main(String[] args) throws IOException {
        pressImage("C://pic//jpg", "C://pic//test.gif", 5000, 5000, 0f);
        pressText("C://pic//jpg", "旺仔之印", "宋体", Font.BOLD|Font.ITALIC, 20, Color.BLACK, 0, 0, 8f);
        resize("C://pic//4.jpg", 1000, 500, true);
    }
}

getLength 这个方法用来得到文字的长度 全角一个字 半角算半个字 但是感觉这种方法不太好 不知道有没有更好地方法~

---

2、使用js给页面显示的图片添加水印效果

功能描述：使用Jquery 给页面的图片添加 版权信息水印。

              这里的水印并不是真的把每一张图片上都添加了水印。而是在图片的上方添加了一个层，层中包含了水印图片效果就像是图片上加了水印。

功能原理：1，使用jquery 遍历页面的所有img标签，取得其位置信息
              2，在body里边追加一个div，div中放水印图片，根据1中取得的位置，来确定水印div的相对位置。

代码：

$(function(){
             
                
                $("img").each(function(){
                    // 特殊情况--过滤掉无关的图片
                    if($(this).attr("id") == "img1"){
                        return;
                    }
                    
                    
                    var top = $(this).offset().top+10;//这里数字根据需要调，一般配在数据库中
                    var left = $(this).offset().left+10;
                    var styleString="250px;height:50px;display:block;position:absolute;left:"+left+"px;top:"+top+"px;";
                    var imageUrl="images/shuiyin.jpg";
                    //追加水印div
                    $(document.body).append('<div id="shuiyinDiv" style='+styleString+'><img src='+imageUrl+'></div>');
                });

---

3、JS加水印遮罩

<%@ page language="java" pageEncoding="utf-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <title>悬浮水印</title>
        <meta http-equiv="pragma" content="no-cache">
        <meta http-equiv="cache-control" content="no-cache">
        <meta http-equiv="expires" content="0">
        <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
        <meta http-equiv="description" content="This is my page">
        <script type="text/javascript" src="watermark.js"></script>
    </head>
    <body onload="GetWaterMarked(window,'watermark.jpg','this')">
        <div><font size="7">
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        This is a test.<br>
        </font></div>
    </body>
</html>

function GetWaterMarked(targetObj,jpgUrl,targetStr ) {
        var windowobj=targetObj;
        var waterMarkPicUrl=jpgUrl;
        var controlWindowStr=targetStr;
        if(windowobj.document.getElementById("waterMark") != null)
            return;
        var m = "waterMark";
        var newMark = windowobj.document.createElement("div");
        newMark.id = m;
        
        //定义div绝对位置
        newMark.style.position = "absolute";
        newMark.style.top = "0px";
        newMark.style.left = "0px";
        //设置div堆叠顺序，若为正数，则离用户更近，为负，数则表示离用户更远
        newMark.style.zIndex = "99999";
        //使用浏览器宽
        newMark.style.width = windowobj.document.body.clientWidth;
        //页面实际长度(不显示竖向滚动条)>浏览器长
        if( parseInt(windowobj.document.body.scrollHeight) > parseInt(windowobj.document.body.clientHeight) ){
            newMark.style.height = windowobj.document.body.scrollHeight;
        }else{
            newMark.style.height = windowobj.document.body.clientHeight;
        }
        //使用水印图片设为div背景
        newMark.style.backgroundImage = "url("+ waterMarkPicUrl +")";
        //透明样式
        newMark.style.filter = "alpha(opacity=20)";
        //加入div
        windowobj.document.body.appendChild(newMark);

        var markStr = "var sobj ="+controlWindowStr+".document.getElementById('waterMark');sobj.style.width ="+controlWindowStr+".document.body.clientWidth;sobj.style.height ="+controlWindowStr+".document.body.clientHeight;";
        if(windowobj.document.body.onresize != null){
            var oldResiae = windowobj.document.body.onresize.toString();
             var oldResiaeStr = oldResiae.substr(oldResiae.indexOf("{")+1);
             var oldResiaeStr= oldResiaeStr.substr(0,oldResiaeStr.lastIndexOf("}"));
             oldResiaeStr+=";"+markStr;
             windowobj.document.body.onresize = new Function(oldResiaeStr);
        }else{
            windowobj.document.body.onresize = new Function(markStr);
        }
 }