javascript,java给图片添加水印背景

javascript给图片添加水印背景:

<script src="../js/jquery-1.12.0.min.js"></script>
    <script type="text/javascript">
  $(function () {
            watermark("settings", "");
            //watermarkWord("settings");
        })
        /**
         * settings
         * 图片id
         * zoom滚动百分比
         * */
        function watermark(settings, zoom) {

            var top = 0;
            var left = 0;
            var ele = document.getElementById(settings);
            while (ele) {
                top += ele.offsetTop;
                left += ele.offsetLeft;
                ele = ele.offsetParent;
            }
            //默认设置
            var defaultSettings = {
                watermark_txt: "admin",
                watermark_x: left,//水印起始位置x轴坐标
                watermark_y: top,//水印起始位置Y轴坐标
                watermark_rows: 20,//水印行数
                watermark_cols: 20,//水印列数
                watermark_x_space: 110,//水印x轴间隔
                watermark_y_space: 110,//水印y轴间隔
                watermark_color: '#aaa',//水印字体颜色
                watermark_alpha: 0.4,//水印透明度
                watermark_fontsize: '40px',//水印字体大小
                watermark_font: '微软雅黑',//水印字体
                watermark_width: 210,//水印宽度
                watermark_height: 80,//水印长度
                watermark_angle: 45//水印倾斜度数
            };
            //采用配置项替换默认值，作用类似jquery.extend
            if (arguments.length === 1 && typeof arguments[0] === "object") {
                var src = arguments[0] || {};
                for (key in src) {
                    if (src[key] && defaultSettings[key] && src[key] === defaultSettings[key])
                        continue;
                    else if (src[key])
                        defaultSettings[key] = src[key];
                }
            }

            var oTemp = document.createDocumentFragment();
            var widt = $("#" + settings).width();
            var heigh = $("#" + settings).height();
            if (zoom > 0) {
                widt = widt * zoom / 100;
                heigh = heigh * zoom / 100;
            }
            //获取页面最大宽度
            var page_width = Math.max(widt, widt);
            var cutWidth = page_width * 0.0150;
            var page_width = page_width - cutWidth;
            //获取页面最大高度
            var page_height = Math.max(heigh, heigh)//;
            // var page_height = document.body.scrollHeight+document.body.scrollTop;
            //如果将水印列数设置为0，或水印列数设置过大，超过页面最大宽度，则重新计算水印列数和水印x轴间隔
            if (defaultSettings.watermark_cols == 0 || (parseInt(defaultSettings.watermark_x + defaultSettings.watermark_width * defaultSettings.watermark_cols + defaultSettings.watermark_x_space * (defaultSettings.watermark_cols - 1)) > page_width)) {
                defaultSettings.watermark_cols = parseInt((page_width - defaultSettings.watermark_x + defaultSettings.watermark_x_space) / (defaultSettings.watermark_width + defaultSettings.watermark_x_space));
                if ((defaultSettings.watermark_cols - 1) != 0) {
                    defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols) / (defaultSettings.watermark_cols - 1));
                } else {
                    defaultSettings.watermark_x_space = parseInt((page_width - defaultSettings.watermark_x - defaultSettings.watermark_width * defaultSettings.watermark_cols));
                }
            }
            //如果将水印行数设置为0，或水印行数设置过大，超过页面最大长度，则重新计算水印行数和水印y轴间隔
            if (defaultSettings.watermark_rows == 0 || (parseInt(defaultSettings.watermark_y + defaultSettings.watermark_height * defaultSettings.watermark_rows + defaultSettings.watermark_y_space * (defaultSettings.watermark_rows - 1)) > page_height)) {
                defaultSettings.watermark_rows = parseInt((defaultSettings.watermark_y_space + page_height - defaultSettings.watermark_y) / (defaultSettings.watermark_height + defaultSettings.watermark_y_space));
                if ((defaultSettings.watermark_rows - 1) != 0) {
                    defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows) / (defaultSettings.watermark_rows - 1));
                } else {
                    defaultSettings.watermark_y_space = parseInt(((page_height - defaultSettings.watermark_y) - defaultSettings.watermark_height * defaultSettings.watermark_rows));
                }
            }
            var x;
            var y;
            if (document.getElementsByClassName("mask_div")) {
                $(".mask_div").remove();
            }
            for (var i = 0; i < defaultSettings.watermark_rows; i++) {
                y = defaultSettings.watermark_y + (defaultSettings.watermark_y_space + defaultSettings.watermark_height) * i;
                for (var j = 0; j < defaultSettings.watermark_cols; j++) {
                    x = defaultSettings.watermark_x + (defaultSettings.watermark_width + defaultSettings.watermark_x_space) * j;
                    if (x == "NaN") {
                        x = defaultSettings.watermark_x;
                    }
                    var mask_div = document.createElement('div');
                    mask_div.id = 'mask_div' + i + j;
                    mask_div.className = 'mask_div';
                    mask_div.appendChild(document.createTextNode(defaultSettings.watermark_txt));
                    //设置水印div倾斜显示
                    mask_div.style.webkitTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.MozTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.msTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.OTransform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.transform = "rotate(-" + defaultSettings.watermark_angle + "deg)";
                    mask_div.style.visibility = "";
                    mask_div.style.position = "absolute";
                    mask_div.style.left = x + 'px';
                    mask_div.style.top = y + 'px';
                    mask_div.style.overflow = "hidden";
                    mask_div.style.zIndex = "9999";
                    mask_div.style.pointerEvents = 'none';//pointer-events:none  让水印不遮挡页面的点击事件
                    //mask_div.style.;
                    mask_div.style.opacity = defaultSettings.watermark_alpha;
                    mask_div.style.fontSize = defaultSettings.watermark_fontsize;
                    mask_div.style.fontFamily = defaultSettings.watermark_font;
                    mask_div.style.color = defaultSettings.watermark_color;
                    mask_div.style.textAlign = "center";
                    mask_div.style.width = defaultSettings.watermark_width + 'px';
                    mask_div.style.height = defaultSettings.watermark_height + 'px';
                    mask_div.style.display = "block";
                    mask_div.style.zIndex
                    oTemp.appendChild(mask_div);
                }
                ;
            }
            ;
            document.body.appendChild(oTemp);
        }
        /**
         * 图片滚动
         * */
        function bbimg(o) {
            var zoom = parseInt(o.style.zoom, 10) || 100;
            zoom += event.wheelDelta / 12;
            if (zoom > 0) o.style.zoom = zoom + '%';
            watermark("settings", zoom);
            return false;
        }
</script>
           

html代码：

<img src="../img/9ff6410a-ac67-4d1f-82d9-d2b5d33d4d48.jpg" ID="settings" onmousewheel="bbimg(this)">
           

未加背景时：

加背景之后

html5画布添加水印方式

 Javascript代码：

<script type="text/javascript">

        var img = new Image();
        img.src = '../img/9ff6410a-ac67-4d1f-82d9-d2b5d33d4d48.jpg';

        // 加载完成开始绘制
        img.οnlοad=function(){
            var  text="飞哥出品，必属精品"
            var fontsize=20;
            //准备canvas环境
            var canvas=document.getElementById("myCanvas");
            canvas.width=img.width;
            canvas.height=img.height;
            var ctx=canvas.getContext("2d");
            // 绘制图片
            ctx.drawImage(img,0,0);
            // 绘制水印
            ctx.font="20px microsoft yahei";
            //ctx.fillStyle = "rgba(255,255,255,0.5)";
            var x=img.width-text.length*fontsize;
            var y=img.height-fontsize;
            ctx.fillStyle = "red";
            ctx.fillText(text,x,y);
            y-=fontsize;
            ctx.fillText("sdfscsd",x,y);
        }
</script>
           

html代码：

java方式：使用流来对图片进行操作（对源文件进行修改）：

import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.RenderingHints;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileOutputStream;
import java.io.InputStream;
import java.io.OutputStream;

import javax.imageio.ImageIO;
import javax.swing.ImageIcon;

public class imagepr {
	 // 水印透明度
    private static float alpha = 1f;
    private static int fontSize=16;//字体大小
    // 水印横向位置
    private static int positionWidth = 0;//定义而已
    // 水印纵向位置
    private static int positionHeight = 0;//定义而已
    // 水印文字字体
    private static Font font = new Font("宋体", Font.BOLD, fontSize);
    // 水印文字颜色
    private static Color color = Color.red;

    /**
     * 
     * @param alpha
     *            水印透明度
     * @param positionWidth
     *            水印横向位置
     * @param positionHeight
     *            水印纵向位置
     * @param font
     *            水印文字字体
     * @param color
     *            水印文字颜色
     */
    public static void setImageMarkOptions(float alpha, int positionWidth,
            int positionHeight, Font font, Color color) {
        if (alpha != 0.0f)
        	imagepr.alpha = alpha;
        if (positionWidth != 0)
        	imagepr.positionWidth = positionWidth;
        if (positionHeight != 0)
        	imagepr.positionHeight = positionHeight;
        if (font != null)
        	imagepr.font = font;
        if (color != null)
        	imagepr.color = color;
    }

    /**
     * 给图片添加水印图片
     * 
     * @param iconPath
     *            水印图片路径
     * @param srcImgPath
     *            源图片路径
     * @param targerPath
     *            目标图片路径
     */
    public static void markImageByIcon(String iconPath, String srcImgPath,
            String targerPath) {
        markImageByIcon(iconPath, srcImgPath, targerPath, null);
    }

    /**
     * 给图片添加水印图片、可设置水印图片旋转角度
     * 
     * @param iconPath
     *            水印图片路径
     * @param srcImgPath
     *            源图片路径
     * @param targerPath
     *            目标图片路径
     * @param degree
     *            水印图片旋转角度
     */
    public static void markImageByIcon(String iconPath, String srcImgPath,
            String targerPath, Integer degree) {
        OutputStream os = null;
        try {

            Image srcImg = ImageIO.read(new File(srcImgPath));

            BufferedImage buffImg = new BufferedImage(srcImg.getWidth(null),
                    srcImg.getHeight(null), BufferedImage.TYPE_INT_RGB);

            // 1、得到画笔对象
            Graphics2D g = buffImg.createGraphics();

            // 2、设置对线段的锯齿状边缘处理
            g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                    RenderingHints.VALUE_INTERPOLATION_BILINEAR);

            g.drawImage(
                    srcImg.getScaledInstance(srcImg.getWidth(null),
                            srcImg.getHeight(null), Image.SCALE_SMOOTH), 0, 0,
                    null);
            // 3、设置水印旋转
            if (null != degree) {
                g.rotate(Math.toRadians(degree),
                        (double) buffImg.getWidth() / 2,
                        (double) buffImg.getHeight() / 2);
            }

            // 4、水印图片的路径 水印图片一般为gif或者png的，这样可设置透明度
            ImageIcon imgIcon = new ImageIcon(iconPath);

            // 5、得到Image对象。
            Image img = imgIcon.getImage();

            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
                    alpha));
            
 
            // 6、水印图片的位置
            g.drawImage(img, positionWidth, positionHeight, null);
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_OVER));
            // 7、释放资源
            g.dispose();

            // 8、生成图片
            os = new FileOutputStream(targerPath);
            ImageIO.write(buffImg, "JPG", os);

            System.out.println("图片完成添加水印图片");

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (null != os)
                    os.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    /**
     * 给图片添加水印文字
     * 
     * @param logoText
     *            水印文字
     * @param srcImgPath
     *            源图片路径
     * @param targerPath
     *            目标图片路径
     */
    public static void markImageByText(String logoText, String srcImgPath,
            String targerPath) {
        markImageByText(logoText, srcImgPath, targerPath, null);
    }

    /**
     * 给图片添加水印文字、可设置水印文字的旋转角度
     * 
     * @param logoText
     * @param srcImgPath
     * @param targerPath
     * @param degree
     */
    public static void markImageByText(String logoText, String srcImgPath,
            String targerPath, Integer degree) {

        InputStream is = null;
        OutputStream os = null;
        try {
            // 1、源图片
            Image srcImg = ImageIO.read(new File(srcImgPath));
            BufferedImage buffImg = new BufferedImage(srcImg.getWidth(null),
                    srcImg.getHeight(null), BufferedImage.TYPE_INT_RGB);

            // 2、得到画笔对象
            Graphics2D g = buffImg.createGraphics();
            // 3、设置对线段的锯齿状边缘处理
            g.setRenderingHint(RenderingHints.KEY_INTERPOLATION,
                    RenderingHints.VALUE_INTERPOLATION_BILINEAR);
            g.drawImage(
                    srcImg.getScaledInstance(srcImg.getWidth(null),
                            srcImg.getHeight(null), Image.SCALE_SMOOTH), 0, 0,
                    null);
            // 4、设置水印旋转
            if (null != degree) {
                g.rotate(Math.toRadians(degree),
                        (double) buffImg.getWidth() / 2,
                        (double) buffImg.getHeight() / 2);
            }
            // 5、设置水印文字颜色
            g.setColor(color);
            // 6、设置水印文字Font
            g.setFont(font);
            // 7、设置水印文字透明度
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
                    alpha));
            // 8、第一参数->设置的内容，后面两个参数->文字在图片上的坐标位置(x,y)
            System.out.println(logoText.length()+1);
            positionWidth= srcImg.getWidth(null)-(logoText.length()+1)*fontSize;
            positionHeight=srcImg.getHeight(null)-fontSize;
            g.drawString(logoText, positionWidth, positionHeight);
            // 9、释放资源
            g.dispose();
            // 10、生成图片
            os = new FileOutputStream(targerPath);
            ImageIO.write(buffImg, "JPG", os);

            System.out.println("图片完成添加水印文字");

        } catch (Exception e) {
            e.printStackTrace();
        } finally {
            try {
                if (null != is)
                    is.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
            try {
                if (null != os)
                    os.close();
            } catch (Exception e) {
                e.printStackTrace();
            }
        }
    }

    public static void main(String[] args) {
        String srcImgPath = "D:\\ASUS\\Pictures\\9ff6410a-ac67-4d1f-82d9-d2b5d33d4d48.jpg";
        String logoText = "飞哥出品，必属精品";
        String iconPath = "d:/2.jpg";

        String targerTextPath = "D:\\ASUS\\Pictures\\9ff6410a-ac67-4d1f-82d9-d2b5d33d4d49.jpg";
     //  String targerTextPath2 = "";

       // String targerIconPath = "d:/qie_icon.jpg";
       // String targerIconPath2 = "d:/qie_icon_rotate.jpg";

        System.out.println("给图片添加水印文字开始...");
        // 给图片添加水印文字
        markImageByText(logoText, srcImgPath, targerTextPath);
        // 给图片添加水印文字,水印文字旋转-45
      //  markImageByText(logoText, srcImgPath, targerTextPath2, -45);
        System.out.println("给图片添加水印文字结束...");

       /* System.out.println("给图片添加水印图片开始...");
        setImageMarkOptions(0.3f, 1, 1, null, null);
        // 给图片添加水印图片
        markImageByIcon(iconPath, srcImgPath, targerIconPath);
        // 给图片添加水印图片,水印图片旋转-45
        markImageByIcon(iconPath, srcImgPath, targerIconPath2, -45);
        System.out.println("给图片添加水印图片结束...");*/

    }




}
           

虽然大部分源于网络，但是经过本人的测试和优化。毛笔字写的一般般，莫喷。