spring(java,js,html) 截圖上傳圖片實例詳解。本站提示廣大學習愛好者：（spring(java,js,html) 截圖上傳圖片實例詳解）文章只能為提供參考，不一定能成為您想要的結果。以下是spring(java,js,html) 截圖上傳圖片實例詳解正文
html
<#-- 上傳頭像 測試頁 應用imgareaselect 插件 -->
最初 上傳了這個插件 共進修參考
<link rel="stylesheet" type="text/css" href="${frontRes}/imgareaselect/css/imgareaselect-animated.css" />
<link rel="stylesheet" type="text/css" href="${frontRes}/imgareaselect/css/index.css" />
<script type="text/javascript" src="${frontRes}/imgareaselect/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="${frontRes}/imgareaselect/jquery.imgareaselect.pack.js"></script>
<script type="text/javascript" src="${frontRes}/imgareaselect/ajaxfileupload.js"></script>
<script>
function addFile(obj){
//document.getElementById('img').src = path;
$.ajaxFileUpload({
url:'${huluUrl}/trainer/upload/ajaxUpload', //用於文件上傳的辦事器端要求地址
secureuri: false, //能否須要平安協定，普通設置為false
fileElementId: 'photoFile', //文件上傳域的ID
dataType: 'json', //前往值類型 普通設置為json
success: function (data){//辦事器勝利呼應處置函數
var infoArray = eval("("+data+")"); //包數據解析為json格局
var arr = infoArray.data;
$("#img").attr("src","/images/"+arr.photo);
},
error: function (){//辦事器呼應掉敗處置函數
alert('與辦事器通訊掉敗，請稍後再試！');
parent.location.reload();
}
});
}
function preview(img, selection) {
if (!selection.width || !selection.height)
return;
//預覽
var scaleX = 100 / selection.width;
var scaleY = 100 / selection.height;
//var imgx = document.getElementById("photo").style.width;
var imgx = parseInt($("#photo").css("width").split("px")[0]);
var imgy = parseInt($("#photo").css("height").split("px")[0]);
console.debug(imgx+"===="+imgy);
$('#preview img').css({
width : Math.round(scaleX * imgx),
height : Math.round(scaleY * imgy),
marginLeft : -Math.round(scaleX * selection.x1),
marginTop : -Math.round(scaleY * selection.y1)
});
$('#x1').val(selection.x1);
$('#y1').val(selection.y1);
$('#x2').val(selection.x2);
$('#y2').val(selection.y2);
$('#w').val(selection.width);
$('#h').val(selection.height);
//後台數據
$('#x1s').val(selection.x1);
$('#y1s').val(selection.y1);
$('#x2s').val(selection.x2);
$('#y2s').val(selection.y2);
$('#imgx').val(parseInt(imgx));//原圖width寬度
$('#imgy').val(parseInt(imgy));//原圖高度height
}
$(function(selection) {
var imgx = $("#photo").css("width").split("px")[0];
var imgy = $("#photo").css("height").split("px")[0];
var ares = 0;
console.debug(imgx+"===="+imgy);
if(imgx>imgy){
ares = imgy;
}else{
ares = imgx;
}
var ias = $('#photo').imgAreaSelect({
aspectRatio : '1:1',
handles : true,
fadeSpeed : 200,
onSelectChange : preview,
instance : true
});
ias.setSelection(0, 0, ares-1, ares-1);//初始化選擇區域
ias.setOptions({
show : true
});
ias.update();
$(".imgareaselect-outer").css("cursor","Crosshair");
$(".imgareaselect-outer").css("background-color","rgba(255,255,255,0.9)");
//預覽
var scaleX = 100 / ares;
var scaleY = 100 / ares;
$('#preview img').css({
width : Math.round(scaleX * imgx),
height : Math.round(scaleY * imgy),
marginLeft : -Math.round(scaleX * 0),
marginTop : -Math.round(scaleY * 0)
});
//後台數據
$('#x1s').val(0);
$('#y1s').val(0);
$('#x2s').val(ares-1);
$('#y2s').val(ares-1);
$('#imgx').val(imgx);//原圖width寬度
$('#imgy').val(imgy);//原圖高度height
});
</script>
<div class="container" >
<div class="row">
<div class="col-xs-9 pull-right">
<div class="media media-heading">
<h4 >上傳照片</h4>
</div>
<div class="row" >
<div class="col-lg-12">
<div class="btn-group" >
<div class="btn btn-default" role="button" >
<span>+添加照片</span>
<input id="photoFile" type="file" name="photoFile" onchange="addFile(this);" >
</div>
</div>
<span >
<ul>
<li>建議自己照片</li>
<li>只支撐JPG、PNG、GIF，年夜小不跨越5M</li>
</ul>
</span>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="shangchuantouxiang">
<img src="/images/${(trainer.photo)!""}" alt="..." id ="img" class="img-circle" >
</div>
</div>
</div>
<form action ="${huluUrl}/trainer/upload/uploadPhotoTest" method="post" enctype="multipart/form-data" >
<input type="text" id="x1s" name = "x1s" value="-" />
<input type="text" id="y1s" name = "y1s" value="-" />
<input type="text" id="x2s" name = "x2s" value="-" />
<input type="text" id="y2s" name = "y2s" value="-" />
<input type="text" id="imgx" name = "imgx" value="-" />
<input type="text" id="imgy" name = "imgy" value="-" />
<div class="row" >
<div class="col-lg-5">
<div class="btn-group">
<button type="button" class="btn btn-default"id="chongxinshangchuan">從新上傳</button>
</div>
<div class="btn-group">
<button type="submit" class="btn btn-default" id="baocun"> 保留 </button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
<div id="root">
<div id="main">
<div class="container demo">
<div >
<p class="instructions">Click and drag on the image to select an area.</p>
<div >
<div >
<div >
<img id="photo" src="/images/${(trainer.photo)!""}" />
</div>
</div>
</div>
</div>
<div >
<p >Selection Preview</p>
<div >
<div id="preview" >
<img src="/images/${trainer.photo!}" />
</div>
</div>
<table>
<thead>
<tr>
<th colspan="2" >Coordinates</th>
<th colspan="2" >Dimensions</th>
</tr>
</thead>
<tbody>
<tr>
<td ><b>X<sub>1</sub>:</b></td>
<td ><input type="text" id="x1" value="-" /></td>
<td ><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>
</div>
java
//顯示圖片須要在辦事端設置裝備擺設一個虛擬途徑
(tomcat) server.xml
<Context debug="0" docBase="G:\Image" path="/images" reloadable="true"/>
回顯一下數據
[java] view plain copy 在CODE上檢查代碼片派生到我的代碼片
/**
* 跳到上傳頭像2(可截取圖片)
*
* @return
*/
@RequestMapping(value = "toUploadPhoto", method = RequestMethod.GET)
public ModelAndView toUploadTest() {
ModelAndView mav = leftMenu("/trainer/upload/uploadPhoto");
//
Trainer trainer = null;
try {
Long userId = FrontShiroUtil.getUserId();
if (null != userId) {
trainer = trainerRepo.findOne(userId);
trainerDbSvc.updateLastLoginTime(userId);
}
} catch (Exception e) {
e.printStackTrace();
}
mav.addObject("trainer", trainer);
return mav;
}
// 部分刷新上傳圖片
@RequestMapping("/ajaxUpload")
public @ResponseBody AjaxResult ajaxUpload(MultipartHttpServletRequest request) {
Trainer trainer = new Trainer();
// 取得第1張圖片（依據前台的name稱號獲得上傳的文件）
MultipartFile file = request.getFile("photoFile");
if (file.getSize() != 0) {
// 取得文件名：
String filename = file.getOriginalFilename();
String timeType = null;
if (null != filename && !filename.equals("")) {
String imgtype = filename.substring(filename.lastIndexOf("."));
// 獲得途徑
String ctxPath = "E:/rudongImage/photo/";
// 創立文件
File dirPath = new File(ctxPath);
if (!dirPath.exists()) {
dirPath.mkdirs();
}
// 以時光為文件名
Date date = new Date();
SimpleDateFormat sdformat = new SimpleDateFormat("yyyyMMddHHmmss");// 24小時制
String LgTime = sdformat.format(date);
timeType = LgTime + imgtype;
File uploadFile = new File(ctxPath + timeType);
try {
FileCopyUtils.copy(file.getBytes(), uploadFile);
} catch (IOException e) {
e.printStackTrace();
}
}
String headPhotoPath = "photo/" + timeType;
trainer.setPhoto(headPhotoPath);
}
try {
// 依據UserId查詢培訓師
Long userId = FrontShiroUtil.getUserId();
if (null != userId) {
trainer.setUserId(userId);
// 更新培訓師頭像
trainerDbSvc.updateTrainerPhoto(trainer);
}
} catch (Exception e) {
e.printStackTrace();
}
return AjaxResult.createSuccess(trainer);//<span >AjaxResult 可修正</span>
}
/**
* 截取區域上傳圖片測試
*
* @return
*/
@RequestMapping(value = "uploadPhotoTest", method = RequestMethod.POST)
public ModelAndView uploadPhotoTest(MultipartHttpServletRequest request, @RequestParam("x1s") Integer x1,
@RequestParam("y1s") Integer y1, @RequestParam("x2s") Integer x2, @RequestParam("y2s") Integer y2,
@RequestParam("imgx") Integer imgWidth, @RequestParam("imgy") Integer imgHeight) {
ModelAndView mav = leftMenu("redirect:/trainer/upload/toUploadPhoto");
Trainer trainer = null;
try {
// 依據UserId查詢培訓師
Long userId = FrontShiroUtil.getUserId();
if (null != userId) {
trainer = trainerRepo.findOne(userId);
}
} catch (Exception e) {
e.printStackTrace();
}
File uploadFile = new File("E:/rudongImage/" + trainer.getPhoto());
InputStream is = null;
BufferedImage src = null;
int w = -1;
int h = -1;
try {
is = new FileInputStream(uploadFile);
src = javax.imageio.ImageIO.read(is);
w = src.getWidth(null); // 獲得源圖寬
h = src.getHeight(null); // 獲得源圖高
is.close();
} catch (Exception e) {
e.printStackTrace();
}
Integer l = 0;
// 以小邊為准(原圖尺寸)
if (w < h) {
l = w;
} else {
l = h;
}
// 以小邊為准(縮略圖尺寸)
Integer l2 = 0;
if (imgWidth < imgHeight) {
l2 = imgWidth;
} else {
l2 = imgHeight;
}
Integer x = (x1 * l) / l2;// 終點x
Integer y = (y1 * l) / l2;// 終點y
Integer xs = (x2 * l) / l2;// 起點x 對角線地位
Integer ys = (y2 * l) / l2;// 起點y 對角線地位
ImageUtil imageUtil = new ImageUtil();
// 前往截取後的文件名
String photoName = "";
imageUtil.cutImage(uploadFile, "E:/rudongImage/photo/", x, y, xs - x, ys - y);
String headPhotoPath = "photo/" + photoName;
trainer.setPhoto(headPhotoPath);
// 更新培訓師頭像
trainerDbSvc.updateTrainerPhoto(trainer);
return mav;
}
對象類
import java.awt.Color;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Rectangle;
import java.awt.image.BufferedImage;
import java.io.File;
import java.io.FileInputStream;
import java.io.FileNotFoundException;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.util.Arrays;
import java.util.Iterator;
import javax.imageio.ImageIO;
import javax.imageio.ImageReadParam;
import javax.imageio.ImageReader;
import javax.imageio.stream.ImageInputStream;
import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
/**
* 圖片截取對象類
*/
public class ImageUtil {
private Logger log = LoggerFactory.getLogger(getClass());
private static String DEFAULT_THUMB_PREVFIX = "thumb_";
private static String DEFAULT_CUT_PREVFIX = "cut_";
private static Boolean DEFAULT_FORCE = false;
/**
* <p>Title: cutImage</p>
* <p>Description: 依據原圖與裁切size截取部分圖片</p>
* @param srcImg 源圖片
* @param output 圖片輸入流
* @param rect 須要截取部門的坐標和年夜小
*/
public void cutImage(File srcImg, OutputStream output, java.awt.Rectangle rect){
if(srcImg.exists()){
java.io.FileInputStream fis = null;
ImageInputStream iis = null;
try {
fis = new FileInputStream(srcImg);
// ImageIO 支撐的圖片類型 : [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif]
String types = Arrays.toString(ImageIO.getReaderFormatNames()).replace("]", ",");
String suffix = null;
// 獲得圖片後綴
if(srcImg.getName().indexOf(".") > -1) {
suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1);
}// 類型和圖片後綴全體小寫，然後斷定後綴能否正當
if(suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()+",") < 0){
log.info("Sorry, the image suffix is illegal. the standard image suffix is {}." + types);
return ;
}
// 將FileInputStream 轉換為ImageInputStream
iis = ImageIO.createImageInputStream(fis);
// 依據圖片類型獲得該品種型的ImageReader
ImageReader reader = ImageIO.getImageReadersBySuffix(suffix).next();
reader.setInput(iis,true);
ImageReadParam param = reader.getDefaultReadParam();
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0, param);
ImageIO.write(bi, suffix, output);
} catch (FileNotFoundException e) {
e.printStackTrace();
} catch (IOException e) {
e.printStackTrace();
} finally {
try {
if(fis != null) fis.close();
if(iis != null) iis.close();
if(output != null) output.close();
} catch (IOException e) {
e.printStackTrace();
}
}
}else {
log.info("the src image is not exist.");
}
}
public void cutImage(File srcImg, OutputStream output, int x, int y, int width, int height){
cutImage(srcImg, output, new java.awt.Rectangle(x, y, width, height));
}
public void cutImage(File srcImg, String destImgPath, java.awt.Rectangle rect){
File destImg = new File(destImgPath);
if(destImg.exists()){
String p = destImg.getPath();
try {
if(!destImg.isDirectory()) p = destImg.getParent();
if(!p.endsWith(File.separator)) p = p + File.separator;
cutImage(srcImg, new java.io.FileOutputStream(p + DEFAULT_CUT_PREVFIX + "_" + new java.util.Date().getTime() + "_" + srcImg.getName()), rect);
} catch (FileNotFoundException e) {
log.info("the dest image is not exist.");
}
}else log.info("the dest image folder is not exist.");
}
public void cutImage(File srcImg, String destImg, int x, int y, int width, int height){
cutImage(srcImg, destImg, new java.awt.Rectangle(x, y, width, height));
}
public void cutImage(String srcImg, String destImg, int x, int y, int width, int height){
cutImage(new File(srcImg), destImg, new java.awt.Rectangle(x, y, width, height));
}
/**
* <p>Title: thumbnailImage</p>
* <p>Description: 依據圖片途徑生成縮略圖 </p>
* @param imagePath 原圖片途徑
* @param w 縮略圖寬
* @param h 縮略圖高
* @param prevfix 生成縮略圖的前綴
* @param force 能否強迫依照寬高生成縮略圖(假如為false，則生成最好比例縮略圖)
*/
public void thumbnailImage(File srcImg, OutputStream output, int w, int h, String prevfix, boolean force){
if(srcImg.exists()){
try {
// ImageIO 支撐的圖片類型 : [BMP, bmp, jpg, JPG, wbmp, jpeg, png, PNG, JPEG, WBMP, GIF, gif]
String types = Arrays.toString(ImageIO.getReaderFormatNames()).replace("]", ",");
String suffix = null;
// 獲得圖片後綴
if(srcImg.getName().indexOf(".") > -1) {
suffix = srcImg.getName().substring(srcImg.getName().lastIndexOf(".") + 1);
}// 類型和圖片後綴全體小寫，然後斷定後綴能否正當
if(suffix == null || types.toLowerCase().indexOf(suffix.toLowerCase()+",") < 0){
log.info("Sorry, the image suffix is illegal. the standard image suffix is {}." + types);
return ;
}
log.info("target image's size, width:{}, height:{}.",w,h);
Image img = ImageIO.read(srcImg);
// 依據原圖與請求的縮略圖比例，找到最適合的縮略圖比例
if(!force){
int width = img.getWidth(null);
int height = img.getHeight(null);
if((width*1.0)/w < (height*1.0)/h){
if(width > w){
h = Integer.parseInt(new java.text.DecimalFormat("0").format(height * w/(width*1.0)));
log.info("change image's height, width:{}, height:{}.",w,h);
}
} else {
if(height > h){
w = Integer.parseInt(new java.text.DecimalFormat("0").format(width * h/(height*1.0)));
log.info("change image's width, width:{}, height:{}.",w,h);
}
}
}
BufferedImage bi = new BufferedImage(w, h, BufferedImage.TYPE_INT_RGB);
Graphics g = bi.getGraphics();
g.drawImage(img, 0, 0, w, h, Color.LIGHT_GRAY, null);
g.dispose();
// 將圖片保留在原目次並加上前綴
ImageIO.write(bi, suffix, output);
output.close();
} catch (IOException e) {
System.out.println("generate thumbnail image failed."+e);
}
}else{
System.out.println("the src image is not exist.");
}
}
public void thumbnailImage(File srcImg, int w, int h, String prevfix, boolean force){
String p = srcImg.getAbsolutePath();
try {
if(!srcImg.isDirectory()) p = srcImg.getParent();
if(!p.endsWith(File.separator)) p = p + File.separator;
thumbnailImage(srcImg, new java.io.FileOutputStream(p + prevfix +srcImg.getName()), w, h, prevfix, force);
} catch (FileNotFoundException e) {
log.info("the dest image is not exist."+e);
}
}
public void thumbnailImage(String imagePath, int w, int h, String prevfix, boolean force){
File srcImg = new File(imagePath);
thumbnailImage(srcImg, w, h, prevfix, force);
}
public void thumbnailImage(String imagePath, int w, int h, boolean force){
thumbnailImage(imagePath, w, h, DEFAULT_THUMB_PREVFIX, DEFAULT_FORCE);
}
public void thumbnailImage(String imagePath, int w, int h){
thumbnailImage(imagePath, w, h, DEFAULT_FORCE);
}
public void readUsingImageReader(String src, String dest, int w, int h)throws Exception {
// 獲得圖片讀入器
Iterator readers = ImageIO.getImageReadersByFormatName("png");
ImageReader reader = (ImageReader) readers.next();
// 獲得圖片讀入流
InputStream source = new FileInputStream(src);
ImageInputStream iis = ImageIO.createImageInputStream(source);
reader.setInput(iis, true);
// 圖片參數
ImageReadParam param = reader.getDefaultReadParam();
// 100，200是左上肇端地位，300就是取寬度為300的，就是從100開端取300寬，就是橫向100~400，同理縱向200~350的區域就取高度150
// Rectangle rect = new Rectangle(100, 200, 300, 150);//
int hh = 0;
if (h > 100)
hh = (h - 100) / 3;
Rectangle rect = new Rectangle(0, hh, 227, 100);
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0, param);
ImageIO.write(bi,"jpg", new File(dest));
}
public static void main(String[] args) throws Exception {
//new ImageUtil().thumbnailImage("imgs/Tulips.jpg", 150, 100);
//new ImageUtil().cutImage("imgs/Tulips.jpg","imgs", 250, 70, 300, 400);
//new ImageUtil().readUsingImageReader("e://rudongImage/photo/20160302090226.png", "e://rudongImage/photo/2.png", 227, 163);
}
}
xml設置裝備擺設
<bean id="multipartResolver" class="org.springframework.web.multipart.commons.CommonsMultipartResolver"> <!-- one of the properties available; the maximum file size in bytes <property name="maxUploadSize" value="9999999999"/> --> </bean>
插件銜接
http://download.csdn.net/download/u014596302/9572377
款式沒調 有點丑功效都有。
