Java實作圖檔裁剪預覽功能

Java實作圖檔裁剪預覽功能

在項目中，我們需要做些類似頭像上傳，圖檔裁剪的功能，ok看下面文章！

需要插件：jQuery Jcrop 

後端代碼：

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

<code>package</code> <code>org.csg.upload;</code>

<code>import</code> <code>java.awt.Rectangle;</code>

<code>import</code> <code>java.awt.image.BufferedImage;</code>

<code>import</code> <code>java.io.File;</code>

<code>import</code> <code>java.io.FileInputStream;</code>

<code>import</code> <code>java.io.IOException;</code>

<code>import</code> <code>java.util.Iterator;</code>

<code>import</code> <code>javax.imageio.ImageIO;</code>

<code>import</code> <code>javax.imageio.ImageReadParam;</code>

<code>import</code> <code>javax.imageio.ImageReader;</code>

<code>import</code> <code>javax.imageio.stream.ImageInputStream;</code>

<code>public</code> <code>class</code> <code>Upload {</code>

<code>    </code><code>/**</code>

<code>     </code><code>* @author  小夜的傳說</code>

<code>     </code><code>* @param path1 圖檔原路徑</code>

<code>     </code><code>* @param path2  裁剪後存儲的路徑</code>

<code>     </code><code>* @param x x軸</code>

<code>     </code><code>* @param y y軸</code>

<code>     </code><code>* @param w</code>

<code>     </code><code>* @param h</code>

<code>     </code><code>*/</code>

<code>    </code><code>public</code> <code>static</code> <code>void</code> <code>CutImage(String path1,String path2,</code><code>int</code> <code>x,</code><code>int</code> <code>y,</code><code>int</code> <code>w,</code><code>int</code> <code>h){</code>

<code>        </code><code>FileInputStream fileInputStream=</code><code>null</code><code>;</code>

<code>        </code><code>ImageInputStream iis=</code><code>null</code><code>;</code>

<code>        </code> 

<code>        </code><code>try</code> <code>{</code>

<code>            </code><code>//讀取圖檔檔案，建立檔案輸入流</code>

<code>            </code><code>fileInputStream=</code><code>new</code> <code>FileInputStream(path1);</code>

<code>            </code><code>//建立圖檔的檔案流 疊代器</code>

<code>            </code><code>Iterator&lt;ImageReader&gt; it = ImageIO.getImageReadersByFormatName(</code><code>"jpg"</code><code>);</code>

<code>            </code><code>ImageReader reader=it.next();</code>

<code>            </code><code>//擷取圖檔流 建立文圖 檔案流</code>

<code>            </code><code>iis=ImageIO.createImageInputStream(fileInputStream);</code>

<code>            </code><code>//擷取圖檔預設參數</code>

<code>            </code><code>reader.setInput(iis, </code><code>true</code><code>);</code>

<code>            </code><code>ImageReadParam param=reader.getDefaultReadParam();</code>

<code>            </code><code>//定義裁剪區域</code>

<code>            </code><code>Rectangle rect=</code><code>new</code> <code>Rectangle(x,y,w,h);</code>

<code>            </code><code>param.setSourceRegion(rect);</code>

<code>            </code><code>BufferedImage bi=reader.read(</code><code>0</code><code>,param);</code>

<code>            </code><code>ImageIO.write(bi, </code><code>"jpg"</code><code>, </code><code>new</code> <code>File(path2));</code>

<code>        </code><code>} </code><code>catch</code> <code>(Exception e) {</code>

<code>            </code><code>e.printStackTrace();</code>

<code>            </code><code>System.out.println(</code><code>"裁剪失敗"</code><code>);</code>

<code>        </code><code>}</code><code>finally</code><code>{</code>

<code>            </code><code>try</code> <code>{</code>

<code>                </code><code>if</code><code>(fileInputStream!=</code><code>null</code><code>){</code>

<code>                    </code><code>fileInputStream.close();</code>

<code>                </code><code>}</code>

<code>                </code><code>if</code><code>(iis!=</code><code>null</code><code>){</code>

<code>                    </code><code>iis.close();</code>

<code>            </code><code>} </code><code>catch</code> <code>(IOException e) {</code>

<code>                </code><code>e.printStackTrace();</code>

<code>            </code><code>}</code>

<code>            </code> 

<code>        </code><code>}</code>

<code>    </code><code>}</code>

<code>}</code>

通路代碼：

<code>&lt;%@ page language="java" import="java.util.*,org.csg.upload.*" pageEncoding="utf-8"%&gt;</code>

<code>&lt;%</code>

<code>    </code><code>//圖檔的相對路徑</code>

<code>    </code><code>String imagPath=request.getParameter("imgPath");</code>

<code>    </code><code>String relPath=request.getRealPath("/");//擷取圖檔伺服器絕對位址</code>

<code>    </code><code>String newFileName=new Date().getTime()+".jpg";</code>

<code>    </code><code>//實際圖檔路徑</code>

<code>    </code><code>String path1=relPath+imagPath;</code>

<code>    </code><code>//裁剪後存儲到伺服器的圖檔路徑</code>

<code>    </code><code>String path2=relPath+"/images/"+newFileName;</code>

<code>    </code> 

<code>    </code><code>int x=Integer.parseInt(request.getParameter("x"));</code>

<code>    </code><code>int y=Integer.parseInt(request.getParameter("y"));</code>

<code>    </code><code>int w=Integer.parseInt(request.getParameter("w"));</code>

<code>    </code><code>int h=Integer.parseInt(request.getParameter("h"));</code>

<code>    </code><code>try{</code>

<code>    </code><code>Upload.CutImage(path1, path2, x, y, w, h);</code>

<code>    </code><code>out.print("&lt;</code><code>img</code> <code>src</code><code>=</code><code>'images/"+newFileName+"'</code><code>/&gt;");</code>

<code>    </code><code>}catch(Exception e){</code>

<code>    </code><code>e.printStackTrace();</code>

<code>    </code><code>out.print("圖檔裁剪失敗");</code>

<code>%&gt;</code>

jsp代碼：

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

81

82

83

84

85

86

87

88

89

90

91

92

93

94

95

96

97

98

99

100

101

102

103

104

105

<code>&lt;%@ page language="java" import="java.util.*" pageEncoding="utf-8"%&gt;</code>

<code>&lt;!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"&gt;</code>

<code>&lt;</code><code>html</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>head</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>title</code><code>&gt;Jsp開發頭像裁剪&lt;/</code><code>title</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"pragma"</code> <code>content</code><code>=</code><code>"no-cache"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"cache-control"</code> <code>content</code><code>=</code><code>"no-cache"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"expires"</code> <code>content</code><code>=</code><code>"0"</code><code>&gt;    </code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"keywords"</code> <code>content</code><code>=</code><code>"keyword1,keyword2,keyword3"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>meta</code> <code>http-equiv</code><code>=</code><code>"description"</code> <code>content</code><code>=</code><code>"This is my page"</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"css/jquery.Jcrop.css"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"js/jquery.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>    </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code> <code>src</code><code>=</code><code>"js/jquery.Jcrop.min.js"</code><code>&gt;&lt;/</code><code>script</code><code>&gt;</code>

<code>      </code><code>&lt;</code><code>style</code> <code>type</code><code>=</code><code>"text/css"</code><code>&gt;</code>

<code>      </code><code>*{margin: 0;padding: 0;}</code>

<code>      </code><code>.cut{</code>

<code>          </code><code>margin-top: 20px;</code>

<code>      </code><code>}</code>

<code>       </code><code>#preview-pane {</code>

<code>          </code><code>display: block;</code>

<code>          </code><code>position: absolute;</code>

<code>          </code><code>z-index: 2000;</code>

<code>          </code><code>top: 10px;</code>

<code>          </code><code>right: -280px;</code>

<code>          </code><code>padding: 6px;</code>

<code>          </code><code>border: 1px rgba(0,0,0,.4) solid;</code>

<code>          </code><code>background-color: white;</code>

<code>          </code><code>-webkit-border-radius: 6px;</code>

<code>          </code><code>-moz-border-radius: 6px;</code>

<code>          </code><code>border-radius: 6px;</code>

<code>          </code><code>-webkit-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);</code>

<code>          </code><code>-moz-box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);</code>

<code>          </code><code>box-shadow: 1px 1px 5px 2px rgba(0, 0, 0, 0.2);</code>

<code>    </code><code>#preview-pane .preview-container {</code>

<code>      </code><code>width: 250px;</code>

<code>      </code><code>height: 170px;</code>

<code>      </code><code>overflow: hidden;</code>

<code>      </code><code>&lt;/</code><code>style</code><code>&gt;</code>

<code>      </code><code>&lt;</code><code>script</code> <code>type</code><code>=</code><code>"text/javascript"</code><code>&gt;</code>

<code>          </code><code>$(function(){</code>

<code>              </code><code>var jcrop_api,</code>

<code>            </code><code>boundx="",</code>

<code>            </code><code>boundy="",</code>

<code>            </code><code>$preview = $('#preview-pane'),</code>

<code>            </code><code>$pcnt = $('#preview-pane .preview-container'),</code>

<code>            </code><code>$pimg = $('#preview-pane .preview-container img'),</code>

<code>            </code><code>xsize = $pcnt.width(),</code>

<code>            </code><code>ysize = $pcnt.height();</code>

<code>               </code><code>$('#cutImage').Jcrop({</code>

<code>                 </code><code>onChange:showCoords,//擷取選中的值</code>

<code>                 </code><code>onSelect:showCoords,//擷取拖拽的值</code>

<code>                 </code><code>aspectRatio: xsize / ysize</code>

<code>               </code><code>},function(){</code>

<code>                  </code><code>var bounds = this.getBounds();</code>

<code>                  </code><code>boundx = bounds[0];</code>

<code>                  </code><code>boundy = bounds[1];</code>

<code>                  </code><code>jcrop_api = this;</code>

<code>                  </code><code>$preview.appendTo(jcrop_api.ui.holder);</code>

<code>                </code><code>});</code>

<code>               </code><code>function showCoords(c){</code>

<code>                 </code><code>var x=c.x;</code>

<code>                 </code><code>var y=c.y;</code>

<code>                 </code><code>var w=c.w;</code>

<code>                 </code><code>var h=c.h;</code>

<code>                 </code><code>$("#x1").val(parseInt(x));</code>

<code>                 </code><code>$("#y1").val(parseInt(y));</code>

<code>                 </code><code>$("#w").val(parseInt(w));</code>

<code>                 </code><code>$("#h").val(parseInt(h));</code>

<code>               </code><code>if (parseInt(c.w) &gt; 0){</code>

<code>                    </code><code>var rx = xsize / c.w;</code>

<code>                    </code><code>var ry = ysize / c.h;</code>

<code>                    </code><code>$pimg.css({</code>

<code>                      </code><code>width: Math.round(rx * boundx) + 'px',</code>

<code>                      </code><code>height: Math.round(ry * boundy) + 'px',</code>

<code>                      </code><code>marginLeft: '-' + Math.round(rx * c.x) + 'px',</code>

<code>                      </code><code>marginTop: '-' + Math.round(ry * c.y) + 'px'</code>

<code>                    </code><code>});</code>

<code>                  </code><code>}</code>

<code>               </code><code>}</code>

<code>          </code><code>});</code>

<code>      </code><code>&lt;/</code><code>script</code><code>&gt;</code>

<code>  </code><code>&lt;/</code><code>head</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>body</code><code>&gt;</code>

<code>   </code><code>&lt;</code><code>h1</code><code>&gt;Java開發QQ頭像裁剪系統&lt;/</code><code>h1</code><code>&gt;</code>

<code>   </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"cut"</code><code>&gt;</code>

<code>       </code><code>&lt;</code><code>img</code> <code>id</code><code>=</code><code>"cutImage"</code> <code>alt</code><code>=</code><code>""</code> <code>src</code><code>=</code><code>"images/1.jpg"</code> <code>&gt;</code>

<code>       </code><code>&lt;</code><code>div</code> <code>id</code><code>=</code><code>"preview-pane"</code><code>&gt;</code>

<code>            </code><code>&lt;</code><code>div</code> <code>class</code><code>=</code><code>"preview-container"</code><code>&gt;</code>

<code>              </code><code>&lt;</code><code>img</code> <code>src</code><code>=</code><code>"images/1.jpg"</code> <code>class</code><code>=</code><code>"jcrop-preview"</code> <code>alt</code><code>=</code><code>"Preview"</code> <code>/&gt;</code>

<code>            </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>       </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>   </code><code>&lt;/</code><code>div</code><code>&gt;</code>

<code>  </code><code>&lt;</code><code>form</code> <code>action</code><code>=</code><code>"success.jsp"</code> <code>method</code><code>=</code><code>"post"</code> <code>&gt;</code>

<code>      </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>value</code><code>=</code><code>"images/1.jpg"</code> <code>name</code><code>=</code><code>"imgPath"</code><code>&gt;</code>

<code>      </code><code>x軸:&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>size</code><code>=</code><code>"4"</code> <code>id</code><code>=</code><code>"x1"</code> <code>name</code><code>=</code><code>"x"</code> <code>/&gt;</code>

<code>      </code><code>y軸:&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>size</code><code>=</code><code>"4"</code> <code>id</code><code>=</code><code>"y1"</code> <code>name</code><code>=</code><code>"y"</code><code>/&gt;</code>

<code>      </code><code>寬度:&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>size</code><code>=</code><code>"4"</code> <code>id</code><code>=</code><code>"w"</code> <code>name</code><code>=</code><code>"w"</code><code>/&gt;</code>

<code>      </code><code>高度:&lt;</code><code>input</code> <code>type</code><code>=</code><code>"text"</code> <code>size</code><code>=</code><code>"4"</code> <code>id</code><code>=</code><code>"h"</code> <code>name</code><code>=</code><code>"h"</code><code>/&gt;</code>

<code>      </code><code>&lt;</code><code>input</code> <code>type</code><code>=</code><code>"submit"</code> <code>value</code><code>=</code><code>"裁剪"</code><code>/&gt;</code>

<code>  </code><code>&lt;/</code><code>form</code><code>&gt;</code>

<code>  </code><code>&lt;/</code><code>body</code><code>&gt;</code>

<code>&lt;/</code><code>html</code><code>&gt;</code>

效果圖：

<a href="http://s3.51cto.com/wyfs02/M01/6F/75/wKiom1Wc6TqRhmlXAAKKtcSO_6A619.jpg" target="_blank"></a>

本文轉自 小夜的傳說 51CTO部落格，原文連結：http://blog.51cto.com/1936625305/1672098，如需轉載請自行聯系原作者