第一步：上傳大圖片到伺服器，並且展示到頁面
第二部：呼叫jcrop元件js及css

1. <scriptsrc="${ctx}/js/jquery-jcrop/jquery.Jcrop.js"></script>
2. <linkrel="stylesheet"href="${ctx}/css/jquery-jcrop/jquery.Jcrop.css"type="text/css"/>

第三部：採用外掛
進行圖片的選取，其中主要包括x,y,width,height

1. $('#cropButton').click(
   function(){  
2.             var x = $("#x").val();  
3.             var y = $("#y").val();  
4.             var w = $("#w").val();  
5.             var h = $("#h").val();    
6.             if(w == 0 || h == 0 ){  
7.                 alert("您還沒有選擇圖片的剪下區域,不能進行剪下圖片!");  
8.                 return;  
9.             }     
10.             //alert("你要剪下圖片的X座標: "+x + ",Y座標: " + y + ",剪下圖片的寬度: " + w + ",高度：" + h );
11.             if(confirm("確定按照當前大小剪下圖片嗎")){                 
12.                 //document.form1.submit();
13.                 //$("#makeHeadImgDiv").toggle();
14.                 function loadHeadUrl(data){  
15.                     //alert(data.headUrl);
16.                      alert(data.retMsg);  
17.                      $("#img_headUrl"
    ).attr("src",data.headUrl);  
18.                      $("#headUrl").val(data.headUrl);  
19.                     //alert($("#headUrl").val());
20.                 }  
21.                 var url="${ctx}/admin/pri/guest/guest_cutHeadImg.action";  
22.                 var options ={   
23.                         //beforeSubmit: validate,
24.                         url:       url,  
25.                         success:   loadHeadUrl,   
26.                         type:      'post',        
27.                         dataType:  'json'
28.                 };  
29.                 $('#cutHeadImgFrm').ajaxSubmit(options);  
30.             }  
31.      });  

然後呼叫後臺方法切割圖片。
設計的包：
import java.awt.*;
import java.awt.image.*;
import java.awt.Graphics;
import java.awt.color.ColorSpace;
import javax.imageio.ImageIO;
第四部：儲存新檔案路徑，展示圖片到頁面。

方法類：

1. package com.wondertek.meeting.util;  
2. import java.io.*;  
3. import java.awt.*;  
4. import java.awt.image.*;  
5. import java.awt.Graphics;  
6. import java.awt.color.ColorSpace;  
7. import javax.imageio.ImageIO;  
8. publicclass ImageCut {  
9.     /**  
10.      * 影象切割（改）     *  
11.      * @param srcImageFile            源影象地址 
12.      * @param dirImageFile            新影象地址 
13.      * @param x                       目標切片起點x座標 
14.      * @param y                      目標切片起點y座標 
15.      * @param destWidth              目標切片寬度 
16.      * @param destHeight             目標切片高度 
17.      */
18.     publicstaticvoid abscut(String srcImageFile,String dirImageFile, int x, int y, int destWidth,  
19.             int destHeight) {  
20.         try {  
21.             Image img;  
22.             ImageFilter cropFilter;  
23.             // 讀取源影象
24.             BufferedImage bi = ImageIO.read(new File(srcImageFile));  
25.             int srcWidth = bi.getWidth(); // 源圖寬度
26.             int srcHeight = bi.getHeight(); // 源圖高度          
27.             if (srcWidth >= destWidth && srcHeight >= destHeight) {  
28.                 Image image = bi.getScaledInstance(srcWidth, srcHeight,  
29.                         Image.SCALE_DEFAULT);  
30.                 // 改進的想法:是否可用多執行緒加快切割速度
31.                 // 四個引數分別為影象起點座標和寬高
32.                 // 即: CropImageFilter(int x,int y,int width,int height)
33.                 cropFilter = new CropImageFilter(x, y, destWidth, destHeight);  
34.                 img = Toolkit.getDefaultToolkit().createImage(  
35.                         new FilteredImageSource(image.getSource(), cropFilter));  
36.                 BufferedImage tag = new BufferedImage(destWidth, destHeight,  
37.                         BufferedImage.TYPE_INT_RGB);  
38.                 Graphics g = tag.getGraphics();  
39.                 g.drawImage(img, 0, 0, null); // 繪製縮小後的圖
40.                 g.dispose();  
41.                 // 輸出為檔案
42.                 ImageIO.write(tag, "JPEG", new File(dirImageFile));  
43.             }  
44.         } catch (Exception e) {  
45.             e.printStackTrace();  
46.         }  
47.     }  
48.     /** 
49.      * 縮放影象 
50.      *  
51.      * @param srcImageFile       源影象檔案地址 
52.      * @param result             縮放後的影象地址 
53.      * @param scale              縮放比例 
54.      * @param flag               縮放選擇:true 放大; false 縮小; 
55.      */
56.     publicstaticvoid scale(String srcImageFile, String result, int scale,  
57.             boolean flag) {  
58.         try {  
59.             BufferedImage src = ImageIO.read(new File(srcImageFile)); // 讀入檔案
60.             int width = src.getWidth(); // 得到源圖寬
61.             int height = src.getHeight(); // 得到源圖長
62.             if (flag) {  
63.                 // 放大
64.                 width = width * scale;  
65.                 height = height * scale;  
66.             } else {  
67.                 // 縮小
68.                 width = width / scale;  
69.                 height = height / scale;  
70.             }  
71.             Image image = src.getScaledInstance(width, height,Image.SCALE_DEFAULT);  
72.             BufferedImage tag = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);  
73.             Graphics g = tag.getGraphics();  
74.             g.drawImage(image, 0, 0, null); // 繪製縮小後的圖
75.             g.dispose();  
76.             ImageIO.write(tag, "JPEG", new File(result));// 輸出到檔案流
77.         } catch (IOException e) {  
78.             e.printStackTrace();  
79.         }  
80.     }  
81.     /** 
82.      * 重新生成按指定寬度和高度的影象 
83.      * @param srcImageFile       源影象檔案地址 
84.      * @param result             新的影象地址 
85.      * @param _width             設定新的影象寬度 
86.      * @param _height            設定新的影象高度 
87.      */
88.     publicstaticvoid scale(String srcImageFile, String result, int _width,int _height) {        
89.         scale(srcImageFile,result,_width,_height,0,0);  
90.     }  
91.     publicstaticvoid scale(String srcImageFile, String result, int _width,int _height,int x,int y) {  
92.         try {  
93.             BufferedImage src = ImageIO.read(new File(srcImageFile)); // 讀入檔案
94.             int width = src.getWidth(); // 得到源圖寬
95.             int height = src.getHeight(); // 得到源圖長
96.             if (width > _width) {  
97.                  width = _width;  
98.             }  
99.             if (height > _height) {  
100.                 height = _height;  
101. 相關推薦

     使用jquery jcrop外掛進行圖片的擷取與儲存

     第一步：上傳大圖片到伺服器，並且展示到頁面 第二部：呼叫jcrop元件js及css <scriptsrc="${ctx}/js/jquery-jcrop/jquery.Jcrop.js"></script> <linkrel="styl

     ASP 例項：頭像上傳。檔案(圖片)上傳，頭像擷取(Jquery-ui外掛來選取擷取區域)

     引入JS檔案：        <link href="../Css/themes/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" />     jquery-ui的css檔案     <s

     JQuery 定時操作實現圖片顯示與隱藏

     <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src=

     jquery.lazyload外掛實現圖片延遲載入

     jquery.lazyload是一個實現圖片延遲載入的jQuery 外掛，它可以延遲載入長頁面中的圖片。在瀏覽器可視區域外的圖片在初始狀態下不會被載入，直到使用者將頁面滾動到它們所在的位置。 1.引入js檔案 <script src="//ajax.googleapis.com/ajax/l

     利用BufferStream來進行圖片加密與解密

     加密類： public static void JiaMi() { int a; try { BufferedInputStream input = new BufferedInputStream( new FileInputStream("C:\\Users\\Le

     Matplotlib資料視覺化（7）：圖片展示與儲存

     In [1]: import os import matplotlib.image as mpimg from PIL import Image import matplotlib.pyplot as plt import numpy as np import matplot

     jquery jcrop 與後臺擷取圖片

     主要是前臺工作，後臺比較簡單 jcrop $jQuery('#target').Jcrop({ allowSelect: true,

     五滴水：使用Ajax+jQuery來實現前端收到的資料在console上顯示+簡單的主頁設計與bootstrap外掛實現圖片輪播

     前言嘚吧嘚 三天沒更博了，嘻嘻嘻打自己：3 最近的狀態比開始的時候好太多，能看懂cygwin和console上報的錯誤了，知道到底是縮進出了問題還是我的程式碼邏輯不完整了，找資源也知道哪裡是我要的，也可以找到想要的了·······慢慢來，給自己立個flag ：

     基於Qt與OpenCV的圖片讀取、儲存，並利用Canny進行簡單的邊緣處理結果顯示

     第一次寫CSDN部落格，最近在做畢業設計，有空之餘寫了一個圖片讀存和簡單OpenCV的邊緣處理。最終實現了圖片的讀取，邊緣檢測，儲存的功能。 本次採用Qt5.7(安裝包名稱為qt-opensource-windows-x86-mingw530-5.7.1.exe)與OpenCV3.1版本。兩者環境的配置就

     C# 使用FileUpload控件上傳圖片，將文件轉換成二進制進行存儲與讀取

     擴展 實現 bmi extension aaa 插入數據 問題 pup cat 狀況描述： 　　需要上傳文件，但是不想要保存到實體路徑下，便可以用該功能來實現。 效果圖： 　　 　　點擊【Upload】按鈕，上傳文件到數據庫； 　　點擊【Preview】，預覽文件；

     利用Python進行圖片發送與接收的兩種方法---包含客戶端和服務器端代碼

     list() tmp span 客戶端 time() failed pri ucc out 第一種方法 opencv、requests、flask 此方法比較耗費時間 600毫秒左右 客戶端代碼 #coding:utf-8 import cv2 import json i

     jquery外掛laydate(v5.0)與validate關於選擇日期校驗的衝突

     問題1：點選日期控制元件後驗證的是上一次選擇的時間（第一次點選無值） 解決：laydate日期控制元件在值尚未回寫是jquery就已經觸發校驗，所以每次校驗的是之前的資料，現新增日期回寫後觸發事件，再次單獨校驗該欄位即可。 laydate.render({ elem: '#b

     iOS開發技巧之：相簿中的GIF圖片的讀取與儲存

     大家都知道iOS的系統相簿是不支援gif圖片預覽的。但是，這並不代表系統相簿不能儲存和讀取gif圖片。通過Safari長按gif圖片，選擇儲存到相簿，這時儲存到相簿裡的圖片就是gif的，雖然它不會動。 下面將介紹如何對系統相簿進行gif的讀取與儲存。 什麼是 UTI iOS系統相

     使用JCrop進行圖片裁剪，裁剪js說明，裁剪預覽，裁剪上傳，裁剪設計的圖片處理的工具類和程式碼

     分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！        

     C#擷取螢幕儲存圖片

     直接上程式碼 Bitmap bit = new Bitmap(200, 200);//擷取的圖片大小200*200 Graphics g = Graphics.FromImage(bit); g.CopyFromScreen(new Point(30, 30), new Point(0, 0),

     AJAX實現圖片上傳和預覽（傳統ajax與jQuery AJAX；帶圖片的表單提交）

       一、通過Servlet3.0和傳統的AJAX實現圖片上傳和預覽          此方法也適用於帶圖片的表單提交         上傳時預覽圖片    

     numpy之通過陣列與PIL.Image物件的互轉進行圖片處理

     ------------------------------------------------語法基礎------------------------------------------------ import numpy                        

     Java+Jcrop實現圖片裁剪並儲存到伺服器

     外掛下載 前端程式碼 前端程式碼較長，已放至碼雲 示例demo使用的是限制長寬比的圖片選擇方式，其它方式可以訪問官網下載官方壓縮包，裡面有幾個示例demo。 後端程式碼 使用的解碼方式是java8下decoder物件，java8以下請選擇其它解

     SSM中使用Kindeditor外掛實現圖片的批量上傳與回顯

     圖片上傳的方式： 1.上傳到資料庫中的Blob型別，從資料庫中取出來並顯示。詳細見下面連結 http://blog.sina.com.cn/s/blog_5b0745e80102we31.html 2.上傳到伺服器的固定目錄下，在資料庫中僅儲存圖片的地址。詳細見下文 效果

     3DsMax匯出外掛編寫（二）——常規SDK方法進行資訊獲取和儲存檔案

     之前已經把配置vs和maxSdk的方法介紹過了， 下面來介紹一下匯出外掛的具體寫法。不過這不是一個容易說的很詳細的問題。因為我們要寫匯出外掛，通常都是因為想根據自己想要的資訊來匯出，所以就算我把我整個工程都公開，意義也不大的，因為那是根據我自己需要的資料寫