jcrop截圖

一、引入Jcrop相關的js、css文件；

二、調用Jcrop的兩種方式：第一種方式能夠經過api調用起相關的方法進行操做。

var api = $.Jcrop("#ID", {
            aspectRatio : 1,
            onChange : showCoords,
            onSelect : showCoords
           });
$('#srcImg').Jcrop({
            aspectRatio : 1,
            onChange : showCoords,
            onSelect : showCoords
           });

//前端實現
(function($){
    var api = null;
    var defaults={
        fileName: null,
        url: null,
        methodType: 'POST',
        dataType: 'JSON',
        successFun: function(data) {
            alert("處理成功");
        },
        failFun: function(data) {
            alert("處理失敗" + data.msg);
        }
    };
    //切圖
    $.fn.doJcrop = function(options){
        var id = $(this).attr("id");
        api = $.Jcrop("#" + id, {
            aspectRatio : 1,
            onChange : showCoords,
            onSelect : showCoords
        });
        //簡單的事件處理程序，響應自onChange,onSelect事件，按照上面的Jcrop調用
        function showCoords(obj) {
            var opts = $.extend(defaults,options);
            if($('#jcropForm').length == 0) {
                var bounds = api.getBounds();//獲取圖片顯示區域
                var form = "<form id='jcropForm' name='jcropForm' action=" + opts.url + ">" +
                    "<input type='hidden' id='x' name='x' value='" + obj.x + "' />" +
                    "<input type='hidden' id='y' name='y' value='" + obj.y + "' />" +
                    "<input type='hidden' id='w' name='w' value='" + obj.w + "' />" +
                    "<input type='hidden' id='h' name='h' value='" + obj.h + "' />" +
                    "<input type='hidden' id='showWidth' name='showWidth' value='" + bounds[0] + "' />" +
                    "<input type='hidden' id='showHeight' name='showHeight' value='" + bounds[1] + "' />" +
                    "<input type='hidden' id='fileName' name='fileName' value='" + opts.fileName + "' />";
                $(form).appendTo("body");
            } else {
                $("#x").val(obj.x);
                $("#y").val(obj.y);
                $("#w").val(obj.w);
                $("#h").val(obj.h);
            }
        }
    };

    //保存截取圖片部分
    $.fn.doUpload = function(options){
        var opts = $.extend(defaults,options);

        $.ajax({
            url: opts.url,
            type: opts.methodType,
            dataType: opts.dataType,
            data: $('#jcropForm').serialize(),
            success: function (result) {
                if (result.success) {
                    opts.successFun(result.data);
                } else {
                    opts.failFun(result.data);
                }
            },
            error: function () {
                alert("系統錯誤")
            }
        });
    };
})(jQuery);

三、後端操做：

@RequestMapping(value = "/cut", method = RequestMethod.POST)
@ResponseBody
public Object doCut(HttpServletRequest request, int x, int y, int w, int h, int showWidth, int showHeight, final String fileName) {
    String filePath = request.getRealPath("/") + fileName;
    FileUtils.cutImage(filePath, x, y, w, h, showWidth, showHeight);
    return new HashMap<String, Object>()
        {{
            put("success", true);
            put("data", fileName);
        }};
}

/**
 *
 * @param fileName
 * @param x 截取時x座標
 * @param y 截取時y座標
 * @param w 截取時寬度
 * @param h 截取時高度
 * @param showWidth 顯示寬度
 * @param showHeight 顯示高度
 */
public static void cutImage(String fileName, int x, int y, int w, int h, int showWidth, int showHeight) {
   try {
      if(w == 0 || h == 0) {
         throw new IllegalArgumentException("截取文件的寬度和高度必須大於0");
      }
      String imagePath = fileName;
      File file = new File(imagePath);
      if(!file.exists()) {
         throw new IllegalArgumentException("源文件不存在");
      }
      // 讀取源圖像
      BufferedImage bi = ImageIO.read(file);
      int srcWidth = bi.getWidth();      // 源圖寬度
      int srcHeight = bi.getHeight();    // 源圖高度

      //若原圖大小大於切片大小，則進行切割
      if (srcWidth >= w && srcHeight >= h) {
         //還原前端圖片被樣式控制的大小
         x = x * srcWidth / showWidth;
         y = y * srcHeight / showHeight;
         w = w * srcWidth / showWidth;
         h = h * srcHeight / showHeight;

         Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);

         ImageFilter cropFilter = new CropImageFilter(x, y, w, h);
         Image img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
         BufferedImage tag = new BufferedImage(w, h,BufferedImage.TYPE_INT_RGB);
         Graphics g = tag.getGraphics();
         g.drawImage(img, 0, 0, null); // 繪製縮小後的圖
         g.dispose();
         // 輸出爲文件
         ImageIO.write(tag, FilenameUtils.getExtension(fileName), file);
      }
   } catch (IOException e) {
      e.printStackTrace();
   }
}

注：showWeight、showHeight爲前端圖片顯示的寬高度，對應前端經過樣式控制了圖片顯示區域大小的，須要通過後端進行處理顯示比例問題