JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)

前言:在做网站的时候经常用的功能就是,用户上传图片对自己上传的图片进行截图,DIV自己的头像。或者上传幻灯片大图进行DIV设置小图。

解决方案:目前我知道的解决方案有两个如下:

      一、flash用户上传头像组件 ,地址:  http://www.hdfu.net/index.html (但收费)

     二、jq插件imgAreaSelect, 地址:http://odyniec.net/projects/imgareaselect/

注:官网文档为英文的,如果想看中文的这里也有,http://www.jb51.net/article/28485.htm(不一定定保证是最新的)

说了这么多先看看效果吧

直接上代码:

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>imgAreaSelect图片截图</title>
    <script type="text/javascript" src="imgareaselect/scripts/jquery.min.js"></script>
    <script type="text/javascript" src="swfupload/swfupload.js"></script>
    <script type="text/javascript" src="imgareaselect/scripts/jquery.imgareaselect.pack.js"></script>
    <link href="css/style.css" rel="stylesheet" type="text/css"/>
    <link href="css/default.css" rel="stylesheet" type="text/css"/>
    <link href="imgareaselect/css/imgareaselect-default.css" rel="stylesheet" type="text/css"/>
    <script type="text/javascript">
        $(function () {
            //回调方法
            function preview(img, selection) {
                if (!selection.width || !selection.height)
                    return;

                var scaleX = 100 / selection.width;
                var scaleY = 100 / selection.height;

                $(‘#preview img‘).css({
                    width: Math.round(scaleX * 300),
                    height: Math.round(scaleY * 300),
                    marginLeft: -Math.round(scaleX * selection.x1),
                    marginTop: -Math.round(scaleY * selection.y1)
                });

                //完成后对表单进行赋值
                $(‘input[name="x1"]‘).val(selection.x1);
                $(‘input[name="y1"]‘).val(selection.y1);
                $(‘input[name="x2"]‘).val(selection.x2);
                $(‘input[name="y2"]‘).val(selection.y2);
                $(‘input[name="path"]‘).val($(‘img#photo‘).attr("src"));

                $(‘#x1‘).val(selection.x1);
                $(‘#y1‘).val(selection.y1);
                $(‘#x2‘).val(selection.x2);
                $(‘#y2‘).val(selection.y2);
                $(‘#w‘).val(selection.width);
                $(‘#h‘).val(selection.height);

                $(‘#btn‘).show();
            }

            $(‘#photo‘).imgAreaSelect({
                aspectRatio: ‘1:1‘,     //设置区域的比例
                handles: true,          //设置区域的四角显示
                fadeSpeed: 200,         //动画效果时间
                onSelectChange: preview //选择完成后调用的方法
            });

            //表单提交事件
            $(‘#btn‘).click(function () {
                if ($(‘#x1‘).val() == ‘‘) {
                    alert(‘还没有进行截图‘);
                    return;
                }
                $.ajax({
                    type: ‘POST‘,
                    url: ‘/uploadarea?operate=2‘,
                    data: $(‘#dataForm‘).serialize(),
                    dataType: ‘json‘,
                    cache: false,
                    success: function (data) {
                        if (data.success) {
                            var imgLi = $("<li></li>");
                            var newImg = $(‘<div" class=\"img_box ‘ + ‘">‘ +
                                    ‘<img src="‘ + data.imgs + ‘" />‘).appendTo(imgLi);
                            $("#show_list ul").append(imgLi);
                        }
                    }
                });
            });
        });
    </script>
</head>
<body>
<h2 style="text-align: center">截图演示</h2>

<div class="container demo">
    <div style="float: left; width: 50%;">
        <p class="instructions">
            点击这里,选择截图区域,<font color="red">必须为等比例图片</font>
        </p>

        <div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
            <img id="photo" src="img/605.jpg">
        </div>
    </div>

    <div style="float: left; width: 50%;">
        <p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">
            选择区域预览
        </p>

        <div class="frame" style="margin: 0 1em; width: 100px; height: 100px;">
            <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
                <img src="img/605.jpg" style="width: 100px; height: 100px;">
            </div>
        </div>
        <%--表单数据--%>
        <form id="dataForm" style="position: absolute;top:25%;left:60%;">
            <input type="hidden" name="x1" value=""/>
              <input type="hidden" name="y1" value=""/>
              <input type="hidden" name="x2" value=""/>
              <input type="hidden" name="y2" value=""/>
            <input type="hidden" name="path"/>
            <input type="button" id="btn" style="display: none;" value="进行截图"/>
        </form>

        <table style="margin-top: 1em;">
            <thead>
            <tr>
                <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
                    坐标
                </th>
                <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
                    尺寸
                </th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
                <td style="width: 30%;"><input type="text" id="x1" value="-"></td>
                <td style="width: 20%;"><b>Width:</b></td>
                <td><input type="text" value="-" id="w"></td>
            </tr>
            <tr>
                <td><b>Y<sub>1</sub>:</b></td>
                <td><input type="text" id="y1" value="-"></td>
                <td><b>Height:</b></td>
                <td><input type="text" id="h" value="-"></td>
            </tr>
            <tr>
                <td><b>X<sub>2</sub>:</b></td>
                <td><input type="text" id="x2" value="-"></td>
                <td></td>
                <td></td>
            </tr>
            <tr>
                <td><b>Y<sub>2</sub>:</b></td>
                <td><input type="text" id="y2" value="-"></td>
                <td></td>
                <td></td>
            </tr>
            </tbody>
        </table>
    </div>
</div>
<div style="margin: 0 auto;width:960px;">
    <h3>所得截图</h3>

    <div id="show_list">
        <ul>

        </ul>
    </div>
</div>
</body>
</html>

 

上传的Servlet代码:

package com.zxd.tool;

import org.apache.commons.fileupload.FileItem;
import org.apache.commons.fileupload.FileUploadException;
import org.apache.commons.fileupload.disk.DiskFileItemFactory;
import org.apache.commons.fileupload.servlet.ServletFileUpload;

import javax.jws.WebService;
import javax.servlet.ServletConfig;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import java.util.UUID;

/**
 * 图片上传后进行,处理的裁剪类
 *
 * @author 张晓东
 */
@WebServlet("/uploadarea")
public class UploadArea extends HttpServlet {
    private File tempDir;   //临时路径
    private File saveDir;   //保存路径
    private File cutDir;    //裁剪图片保存的路径

    /**
     * servlet初始化事件
     *
     * @param config
     * @throws ServletException
     */
    public void init(ServletConfig config) throws ServletException {
        String uploadPath = config.getServletContext().getRealPath("/");
        StringBuffer sb = new StringBuffer(uploadPath);
        saveDir = new File(sb.append("\\upload").toString());
        tempDir = new File(sb.append("\\temp").toString());
        cutDir = new File(uploadPath + "\\upload\\cut");
        if (!saveDir.exists()) {
            saveDir.mkdir();
        }
        if (!tempDir.exists()) {
            tempDir.mkdir();
        }
        if (!cutDir.exists()) {
            cutDir.mkdir();
        }

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        this.doPost(request, response);
    }

    public void doPost(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
        int operate = request.getParameter("operate").isEmpty() ? 0 : Integer.valueOf(request.getParameter("operate"));

        //方法操作
        switch (operate) {
            case 1:             //上传操作
                uploadImg(request, response);
                break;
            case 2:             //截图操作
                cutImg(request, response);
                break;
        }
    }

    //上传图片
    private void uploadImg(HttpServletRequest request, HttpServletResponse response) throws IOException {
        DiskFileItemFactory factory = new DiskFileItemFactory();
        factory.setSizeThreshold(1 * 1024 * 1024);      //设置缓冲区大小
        factory.setRepository(tempDir);             //设置临时保存目录
        ServletFileUpload sfu = new ServletFileUpload(factory); //Servelt文件上传对象
        sfu.setFileSizeMax(200 * 1024 * 1024);  //200M 文件上传大小
        sfu.setHeaderEncoding("utf-8");
        List<FileItem> list = null;
        try {
            list = sfu.parseRequest(request);       //得到文件
        } catch (FileUploadException e) {
            e.printStackTrace();
        }
        int size = list.size();
        StringBuffer json = new StringBuffer("{\"success\":true,\"imgs\":[");      //输出到页面的json
        PrintWriter out = response.getWriter();
        for (int i = 0; i < size; i++) { //循环保存文件
            FileItem file = list.get(i);
            if (file.isFormField()) {   //如果是表单字段
                String name = file.getFieldName();  // 获得该字段名称
                String value = file.getString("utf-8"); //获得该字段值
            } else {
                String extName = file.getName().substring(      //得到扩展名
                        file.getName().lastIndexOf("."));
                String fname = UUID.randomUUID() + extName;
                try {
                    file.write(new File(saveDir, fname));  // 写入文件
                    String path = request.getSession().getServletContext().getRealPath("/");
                    if (i == size) {
                        json.append(saveDir.toString() + "\\" + fname + "]}");    //回传上传图片路径
                    }
                } catch (Exception e) {
                    e.printStackTrace();
                }
            }
        }
        out.flush();
        out.print(json);
        out.close();
    }

    //裁剪图片
    private void cutImg(HttpServletRequest request, HttpServletResponse response) throws IOException {
        StringBuffer json = new StringBuffer("{\"success\":true,\"imgs\":");      //输出到页面的json
        response.setContentType("text/plain;charset=utf-8");
        response.setCharacterEncoding("utf-8");
        //得到坐标
        Integer x1 = Integer.parseInt(request.getParameter("x1"));
        Integer y1 = Integer.parseInt(request.getParameter("y1"));
        Integer x2 = Integer.parseInt(request.getParameter("x2"));
        Integer y2 = Integer.parseInt(request.getParameter("y2"));
        String basePath = request.getSession().getServletContext().getRealPath("/");    //项目物理路径
        String path = request.getParameter("path");             //原图片路径
        String extName = path.substring(path.lastIndexOf(".")); //文件扩展名
        int width = x2 - x1; //图像的宽度
        int height = y2 - y1;//图像的高度
        String cutFileName ="\\cut_" + UUID.randomUUID() + extName;
        ImageUtils.cut(basePath + "\\" + path,  cutDir.toString() + cutFileName, x1, y1, width, height);
        json.append("\"upload\\\\cut\\"+cutFileName+"\"}");
        PrintWriter out = response.getWriter();
        out.flush();
        out.print(json);
        out.close();

    }
}

 

ImagesUtils.java

package com.zxd.tool;

/**
 * Created by zhang on 14-3-1.
 * 图片的常用操作类
 */

import java.awt.AlphaComposite;
import java.awt.Color;
import java.awt.Font;
import java.awt.Graphics;
import java.awt.Graphics2D;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.color.ColorSpace;
import java.awt.geom.AffineTransform;
import java.awt.image.AffineTransformOp;
import java.awt.image.BufferedImage;
import java.awt.image.ColorConvertOp;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.File;
import java.io.IOException;
import javax.imageio.ImageIO;

/**
 * 图片处理工具类:<br>
 * 功能:缩放图像、切割图像、图像类型转换、彩色转黑白、文字水印、图片水印等
 *
 * @author Administrator
 */
public class ImageUtils {
    /**
     * 几种常见的图片格式
     */
    public static String IMAGE_TYPE_GIF = "gif";// 图形交换格式
    public static String IMAGE_TYPE_JPG = "jpg";// 联合照片专家组
    public static String IMAGE_TYPE_JPEG = "jpeg";// 联合照片专家组
    public static String IMAGE_TYPE_BMP = "bmp";// 英文Bitmap(位图)的简写,它是Windows操作系统中的标准图像文件格式
    public static String IMAGE_TYPE_PNG = "png";// 可移植网络图形
    public static String IMAGE_TYPE_PSD = "psd";// Photoshop的专用格式Photoshop

    /**
     * 缩放图像(按比例缩放)
     *
     * @param srcImageFile 源图像文件地址(绝对路径)
     * @param result       缩放后的图像地址(绝对路径)
     * @param scale        缩放比例
     * @param flag         缩放选择:true 放大; false 缩小;
     */
    public final static void scale(String srcImageFile, String result,
                                   int scale, boolean flag) {
        try {
            BufferedImage src = ImageIO.read(new File(srcImageFile)); // 读入文件
            int width = src.getWidth(); // 得到源图宽
            int height = src.getHeight(); // 得到源图长
            if (flag) {// 放大
                width = width * scale;
                height = height * scale;
            } else {// 缩小
                width = width / scale;
                height = height / scale;
            }
            Image image = src.getScaledInstance(width, height,
                    Image.SCALE_DEFAULT);
            BufferedImage tag = new BufferedImage(width, height,
                    BufferedImage.TYPE_INT_RGB);
            Graphics g = tag.getGraphics();
            g.drawImage(image, 0, 0, null); // 绘制缩小后的图
            g.dispose();
            ImageIO.write(tag, "JPEG", new File(result));// 输出到文件流
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 缩放图像(按高度和宽度缩放)
     *
     * @param srcImageFile 源图像文件地址(绝对路径)
     * @param result       缩放后的图像地址(绝对路径)
     * @param height       缩放后的高度
     * @param width        缩放后的宽度
     * @param bb           比例不对时是否需要补白:true为补白; false为不补白;
     */
    public final static void scale2(String srcImageFile, String result, int height, int width, boolean bb) {
        try {
            double ratio = 0.0; // 缩放比例
            File f = new File(srcImageFile);
            BufferedImage bi = ImageIO.read(f);
            Image itemp = bi.getScaledInstance(width, height, bi.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, "JPEG", new File(result));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 图像切割(按指定起点坐标和宽高切割)
     *
     * @param srcImageFile 源图像地址 (绝对路径)
     * @param result       切片后的图像地址 (绝对路径)
     * @param x            目标切片起点坐标X
     * @param y            目标切片起点坐标Y
     * @param width        目标切片宽度
     * @param height       目标切片高度
     */
    public final static void cut(String srcImageFile, String result,
                                 int x, int y, int width, int height) {
        try {
            // 读取源图像
            BufferedImage bi = ImageIO.read(new File(srcImageFile));
            int srcWidth = bi.getHeight(); // 源图宽度
            int srcHeight = bi.getWidth(); // 源图高度
            if (srcWidth > 0 && srcHeight > 0) {
                Image image = bi.getScaledInstance(srcWidth, srcHeight,
                        Image.SCALE_DEFAULT);
                // 四个参数分别为图像起点坐标和宽高
                // 即: CropImageFilter(int x,int y,int width,int height)
                ImageFilter cropFilter = new CropImageFilter(x, y, width, height);
                Image img = Toolkit.getDefaultToolkit().createImage(
                        new FilteredImageSource(image.getSource(),
                                cropFilter));
                BufferedImage tag = new BufferedImage(width, height, BufferedImage.TYPE_INT_RGB);
                Graphics g = tag.getGraphics();
                g.drawImage(img, 0, 0, width, height, null); // 绘制切割后的图
                g.dispose();
                // 输出为文件
                ImageIO.write(tag, "JPEG", new File(result));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 图像切割(指定切片的行数和列数)
     *
     * @param srcImageFile 源图像地址 (绝对路径)
     * @param descDir      切片目标文件夹
     * @param rows         目标切片行数。默认2,必须是范围 [1, 20] 之内
     * @param cols         目标切片列数。默认2,必须是范围 [1, 20] 之内
     */
    public final static void cut2(String srcImageFile, String descDir,
                                  int rows, int cols) {
        try {
            if (rows <= 0 || rows > 20) rows = 2; // 切片行数
            if (cols <= 0 || cols > 20) cols = 2; // 切片列数
            // 读取源图像
            BufferedImage bi = ImageIO.read(new File(srcImageFile));
            int srcWidth = bi.getHeight(); // 源图宽度
            int srcHeight = bi.getWidth(); // 源图高度
            if (srcWidth > 0 && srcHeight > 0) {
                Image img;
                ImageFilter cropFilter;
                Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
                int destWidth = srcWidth; // 每张切片的宽度
                int destHeight = srcHeight; // 每张切片的高度
                // 计算切片的宽度和高度
                if (srcWidth % cols == 0) {
                    destWidth = srcWidth / cols;
                } else {
                    destWidth = (int) Math.floor(srcWidth / cols) + 1;
                }
                if (srcHeight % rows == 0) {
                    destHeight = srcHeight / rows;
                } else {
                    destHeight = (int) Math.floor(srcWidth / rows) + 1;
                }
                // 循环建立切片
                // 改进的想法:是否可用多线程加快切割速度
                for (int i = 0; i < rows; i++) {
                    for (int j = 0; j < cols; j++) {
                        // 四个参数分别为图像起点坐标和宽高
                        // 即: CropImageFilter(int x,int y,int width,int height)
                        cropFilter = new CropImageFilter(j * destWidth, i * destHeight,
                                destWidth, destHeight);
                        img = Toolkit.getDefaultToolkit().createImage(
                                new FilteredImageSource(image.getSource(),
                                        cropFilter));
                        BufferedImage tag = new BufferedImage(destWidth,
                                destHeight, BufferedImage.TYPE_INT_RGB);
                        Graphics g = tag.getGraphics();
                        g.drawImage(img, 0, 0, null); // 绘制缩小后的图
                        g.dispose();
                        // 输出为文件
                        ImageIO.write(tag, "JPEG", new File(descDir
                                + "_r" + i + "_c" + j + ".jpg"));
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 图像切割(指定切片的宽度和高度)
     *
     * @param srcImageFile 源图像地址 (绝对路径)
     * @param descDir      切片目标文件夹
     * @param destWidth    目标切片宽度。默认200
     * @param destHeight   目标切片高度。默认150
     */
    public final static void cut3(String srcImageFile, String descDir,
                                  int destWidth, int destHeight) {
        try {
            if (destWidth <= 0) destWidth = 200; // 切片宽度
            if (destHeight <= 0) destHeight = 150; // 切片高度
            // 读取源图像
            BufferedImage bi = ImageIO.read(new File(srcImageFile));
            int srcWidth = bi.getHeight(); // 源图宽度
            int srcHeight = bi.getWidth(); // 源图高度
            if (srcWidth > destWidth && srcHeight > destHeight) {
                Image img;
                ImageFilter cropFilter;
                Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
                int cols = 0; // 切片横向数量
                int rows = 0; // 切片纵向数量
                // 计算切片的横向和纵向数量
                if (srcWidth % destWidth == 0) {
                    cols = srcWidth / destWidth;
                } else {
                    cols = (int) Math.floor(srcWidth / destWidth) + 1;
                }
                if (srcHeight % destHeight == 0) {
                    rows = srcHeight / destHeight;
                } else {
                    rows = (int) Math.floor(srcHeight / destHeight) + 1;
                }
                // 循环建立切片
                // 改进的想法:是否可用多线程加快切割速度
                for (int i = 0; i < rows; i++) {
                    for (int j = 0; j < cols; j++) {
                        // 四个参数分别为图像起点坐标和宽高
                        // 即: CropImageFilter(int x,int y,int width,int height)
                        cropFilter = new CropImageFilter(j * destWidth, i * destHeight,
                                destWidth, destHeight);
                        img = Toolkit.getDefaultToolkit().createImage(
                                new FilteredImageSource(image.getSource(),
                                        cropFilter));
                        BufferedImage tag = new BufferedImage(destWidth,
                                destHeight, BufferedImage.TYPE_INT_RGB);
                        Graphics g = tag.getGraphics();
                        g.drawImage(img, 0, 0, null); // 绘制缩小后的图
                        g.dispose();
                        // 输出为文件
                        ImageIO.write(tag, "JPEG", new File(descDir
                                + "_r" + i + "_c" + j + ".jpg"));
                    }
                }
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 图像类型转换:GIF->JPG、GIF->PNG、PNG->JPG、PNG->GIF(X)、BMP->PNG
     *
     * @param srcImageFile  源图像地址 (绝对路径)
     * @param formatName    包含格式非正式名称的 String:如JPG、JPEG、GIF等
     * @param destImageFile 目标图像地址 (绝对路径)
     */
    public final static void convert(String srcImageFile, String formatName, String destImageFile) {
        try {
            File f = new File(srcImageFile);
            f.canRead();
            f.canWrite();
            BufferedImage src = ImageIO.read(f);
            ImageIO.write(src, formatName, new File(destImageFile));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 彩色转为黑白
     *
     * @param srcImageFile  源图像地址 (绝对路径)
     * @param destImageFile 目标图像地址 (绝对路径)
     */
    public final static void gray(String srcImageFile, String destImageFile) {
        try {
            BufferedImage src = ImageIO.read(new File(srcImageFile));
            ColorSpace cs = ColorSpace.getInstance(ColorSpace.CS_GRAY);
            ColorConvertOp op = new ColorConvertOp(cs, null);
            src = op.filter(src, null);
            ImageIO.write(src, "JPEG", new File(destImageFile));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

    /**
     * 给图片添加文字水印
     *
     * @param pressText     水印文字
     * @param srcImageFile  源图像地址 (绝对路径)
     * @param destImageFile 目标图像地址 (绝对路径)
     * @param fontName      水印的字体名称
     * @param fontStyle     水印的字体样式
     * @param color         水印的字体颜色
     * @param fontSize      水印的字体大小
     * @param x             修正值
     * @param y             修正值
     * @param alpha         透明度:alpha 必须是范围 [0.0, 1.0] 之内(包含边界值)的一个浮点数字
     */
    public final static void pressText(String pressText,
                                       String srcImageFile, String destImageFile, String fontName,
                                       int fontStyle, Color color, int fontSize, int x,
                                       int y, float alpha) {
        try {
            File img = new File(srcImageFile);
            Image src = ImageIO.read(img);
            int width = src.getWidth(null);
            int height = src.getHeight(null);
            BufferedImage image = new BufferedImage(width, height,
                    BufferedImage.TYPE_INT_RGB);
            Graphics2D g = image.createGraphics();
            g.drawImage(src, 0, 0, width, height, null);
            g.setColor(color);
            g.setFont(new Font(fontName, fontStyle, fontSize));
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
                    alpha));
            // 在指定坐标绘制水印文字
            g.drawString(pressText, (width - (getLength(pressText) * fontSize))
                    / 2 + x, (height - fontSize) / 2 + y);
            g.dispose();
            ImageIO.write((BufferedImage) image, "JPEG", new File(destImageFile));// 输出到文件流
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 给图片添加文字水印
     *
     * @param pressText     水印文字
     * @param srcImageFile  源图像地址 (绝对路径)
     * @param destImageFile 目标图像地址 (绝对路径)
     * @param fontName      字体名称
     * @param fontStyle     字体样式
     * @param color         字体颜色
     * @param fontSize      字体大小
     * @param x             修正值
     * @param y             修正值
     * @param alpha         透明度:alpha 必须是范围 [0.0, 1.0] 之内(包含边界值)的一个浮点数字
     */
    public final static void pressText2(String pressText, String srcImageFile, String destImageFile,
                                        String fontName, int fontStyle, Color color, int fontSize, int x,
                                        int y, float alpha) {
        try {
            File img = new File(srcImageFile);
            Image src = ImageIO.read(img);
            int width = src.getWidth(null);
            int height = src.getHeight(null);
            BufferedImage image = new BufferedImage(width, height,
                    BufferedImage.TYPE_INT_RGB);
            Graphics2D g = image.createGraphics();
            g.drawImage(src, 0, 0, width, height, null);
            g.setColor(color);
            g.setFont(new Font(fontName, fontStyle, fontSize));
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
                    alpha));
            // 在指定坐标绘制水印文字
            g.drawString(pressText, (width - (getLength(pressText) * fontSize))
                    / 2 + x, (height - fontSize) / 2 + y);
            g.dispose();
            ImageIO.write((BufferedImage) image, "JPEG", new File(destImageFile));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 给图片添加图片水印
     *
     * @param pressImg      水印图片 (绝对路径)
     * @param srcImageFile  源图像地址 (绝对路径)
     * @param destImageFile 目标图像地址 (绝对路径)
     * @param x             修正值。 默认在中间
     * @param y             修正值。 默认在中间
     * @param alpha         透明度:alpha 必须是范围 [0.0, 1.0] 之内(包含边界值)的一个浮点数字
     */
    public final static void pressImage(String pressImg, String srcImageFile, String destImageFile,
                                        int x, int y, float alpha) {
        try {
            File img = new File(srcImageFile);
            Image src = ImageIO.read(img);
            int wideth = src.getWidth(null);
            int height = src.getHeight(null);
            BufferedImage image = new BufferedImage(wideth, height,
                    BufferedImage.TYPE_INT_RGB);
            Graphics2D g = image.createGraphics();
            g.drawImage(src, 0, 0, wideth, height, null);
            // 水印文件
            Image src_biao = ImageIO.read(new File(pressImg));
            int wideth_biao = src_biao.getWidth(null);
            int height_biao = src_biao.getHeight(null);
            g.setComposite(AlphaComposite.getInstance(AlphaComposite.SRC_ATOP,
                    alpha));
            g.drawImage(src_biao, (wideth - wideth_biao) / 2,
                    (height - height_biao) / 2, wideth_biao, height_biao, null);
            // 水印文件结束
            g.dispose();
            ImageIO.write((BufferedImage) image, "JPEG", new File(destImageFile));
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    /**
     * 计算text的长度(一个中文算两个字符)
     *
     * @param text
     * @return
     */
    public final static int getLength(String text) {
        int length = 0;
        for (int i = 0; i < text.length(); i++) {
            if (new String(text.charAt(i) + "").getBytes().length > 1) {
                length += 2;
            } else {
                length += 1;
            }
        }
        return length / 2;
    }
}

 

注:如果在JQ中ajax方法没有执行,请检查Json返回的数据格式是否正确!

时间: 2024-10-12 19:09:19

JQ插件之imgAreaSelect实现对图片的在线截图功能(java版)的相关文章

WebUploader插件上传大文件单文件和多文件JAVA版使用总结

一.使用webuploader插件的原因说明 被现在做的项目坑了. 先说一下我的项目架构Spring+struts2+mybatis+mysql 然后呢.之前说好的按照2G上传就可以了,于是乎,用了ajaxFileUpload插件,因为之前用图片上传也是用这个,所以上传附件的时候就直接拿来用了 各种码代码,测试也测过了,2G文件上传没问题,坑来了,项目上线后,客户又要求上传4G文件,甚至还有20G以上的..纳尼,你不早说哦... 在IE11下用ajaxFileUpload.js插件上传超过4G的

个人学习JQ插件编写成果:little酷炫的图片滑动切换效果

工作一个多月了,好久没来冒冒泡了,看了@wayong的JQ插件教程,自己编写了一个模仿拉勾网首页广告栏滑动特效的JQ插件,现在跟朋友们分享分享! 先上demo链接:http://runjs.cn/detail/gpowdhhk 快要下班了~先把代码放出来~~回家再编辑~ 这里是HTML代码: 1 <!--js酷炫图片滑动hover效果,类似拉勾网--> 2 <div class="beauty-go-outer" id="my-div"> 3

jq插件第二款来袭 图片滚动

这第二款也是非常实用的插件,也是与图片相关,关于图片的需求太多了,这个是图片滚动哦,不过不是无缝滚动,是左像右滚动,到头的话再往回滚动,利用scrollLeft实现的,支持自动滚动和每次滚动的个数默认为1张,另外提供了连个外接方法, 停止自动滚动$.fn.roll.stop,继续自动滚动$.fn.roll.auto,不多说,上菜! JQ插件代码 (function($){ $.fn.roll = function(options){ if($(this).length == 0) return

jQuery基础(常用插件 表单验证,图片放大镜,自定义对象级,jQuery UI,面板折叠)

1.表单验证插件--validate   该插件自带包含必填.数字.URL在内容的验证规则,即时显示异常信息,此外,还允许自定义验证规则,插件调用方法如下: $(form).validate({options}) 其中form参数表示表单元素名称,options参数表示调用方法时的配置对象,所有的验证规则和异常信息显示的位置都在该对象中进行设置.     2.表单插件--form 通过表单form插件,调用ajaxForm()方法,实现ajax方式向服务器提交表单数据,并通过方法中的option

推荐一个Xcode插件: KSImageNamed (自动补全图片文件名称, 并显示图片大小)

http://www.csdn.net/article/2014-05-04/2819586-the-best-xcode-plugins 5. KSImageNamed KSImageNamed是一款能够帮助开发者在Xcode中自动补全图片文件名称的插件,其开发者Kent Sutherland来自美国波士顿.KSImageNamed支持NSImage和UIImage,当开发者写到"[UIImage imaged:"时,便会自动将项目中的图片名称提示出来.此外,KSImageNamed

jq插件的编写方法(自定义jq插件)---转

本JQ插件例子是在你网站的文章结尾处添加你的版权. JQ插件标准的封装代码如下,首先需要闭包: 1 <script type="text/javascript"> 2 (function ($) { 3 //这里放入插件代码 4 })(jQuery); 5 </script> 这是jQuery官方的插件开发规范,这样写是作用是:1. 避免全局依赖.2. 避免第三方破坏.3. 兼容jQuery操作符'$'和'jQuery' 接着给插件加入主体: 1 <scr

自写图片遮罩层放大功能jquery插件源代码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,可是天公不作美,公司须要让我自己开发个图片放大的插件 但公司老大的话,宛如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人仅仅能瞎研究了,幸好黑天不负屌丝人,本屌丝最终搞出来了,尽管不尽善尽美,可是功能还是能够用的啦 先附上源代码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg

移动端那些事;hammer不错的jq插件。

从pc端到移动端相信很多前端攻城师为移动端发愁,写原声的手机端事件是非常费力的, 而jq的click有300毫秒延迟,现在有了比较不错的jq插件hammer,Hammer.js是一个开源的,轻量级的javascript库,它可以在不需要依赖其他东西的情况下识别触摸,鼠标事件支持各种手机事件,比如缩放 ,qq左滑动删除,  放大, 旋转等. 下面用一个tab切换来介绍hammer. 用法: 1,首先引入jq2.0以上版本和jquery.hammer.js. 2,获取元素,和jq一样,在后面加上ha

自写图片遮罩层放大功能jquery插件源码,photobox.js 1.0版,不兼容IE6

阿嚏~~~ 话说本屌丝没啥开发插件的经验,但是天公不作美,公司需要让我自己开发个图片放大的插件 但公司老大的话,犹如吾皇之圣旨,微臣必当肝脑涂地,莫敢不从啊~~~ 于是乎,作为一个超级小白,本人只能瞎研究了,幸好黑天不负屌丝人,本屌丝终于搞出来了,虽然不尽善尽美,但是功能还是可以用的啦 先附上源码,求各种大神指导: /******************************* * photobox跨浏览器兼容插件 v1.0(不支持IE6) * 格式:<a href="big.jpg&q