spring(java,js,html) 截圖上傳圖片實(shí)例詳解

2020-03-24 16:02:26

字體：大中小

供稿：網(wǎng)友

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/html' target='_blank'>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', //用于文件上傳的服務(wù)器端請(qǐng)求地址 secureuri: false, //是否需要安全協(xié)議，一般設(shè)置為false fileElementId: 'photoFile', //文件上傳域的ID dataType: 'json', //返回值類(lèi)型一般設(shè)置為json success: function (data){//服務(wù)器成功響應(yīng)處理函數(shù) var infoArray = eval("("+data+")"); //包數(shù)據(jù)解析為json格式 var arr = infoArray.data; $("#img").attr("src","/images/"+arr.photo); error: function (){//服務(wù)器響應(yīng)失敗處理函數(shù) alert('與服務(wù)器通信失敗，請(qǐng)稍后再試！'); parent.location.reload(); function preview(img, selection) { if (!selection.width || !selection.height) return; //預(yù)覽 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); //后臺(tái)數(shù)據(jù) $('#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);//初始化選擇區(qū)域 ias.setOptions({ show : true ias.update(); $(".imgareaselect-outer").css("cursor","Crosshair"); $(".imgareaselect-outer").css("background-color","rgba(255,255,255,0.9)"); //預(yù)覽 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) //后臺(tái)數(shù)據(jù) $('#x1s').val(0); $('#y1s').val(0); $('#x2s').val(ares-1); $('#y2s').val(ares-1); $('#imgx').val(imgx);//原圖width寬度 $('#imgy').val(imgy);//原圖高度height /script div div div div h4 上傳照片 /h4 /div div div div div role="button" span +添加照片 /span input id="photoFile" type="file" name="photoFile" onchange="addFile(this);" /div /div span li 建議本人照片 /li li 只支持JPG、PNG、GIF，大小不超過(guò)5M /li /ul /span /div /div div div div img src="/images/${(trainer.photo)!""}" alt="..." id ="img" /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 div div button type="button" id="chongxinshangchuan" 重新上傳 /button /div div button type="submit" id="baocun" 保存 /button /div /div /div /form /div /div /div div id="root" div id="main" div div p 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 th colspan="2" Coordinates /th th colspan="2" Dimensions /th /tr /thead tbody 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 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 td b X sub 2 /sub : /b /td td input type="text" id="x2" value="-" / /td td /td td /td /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//顯示圖片需要在服務(wù)端配置一個(gè)虛擬路徑(tomcat) server.xml Context debug="0" docBase="G:/Image" path="/images" reloadable="true"/ 回顯一下數(shù)據(jù)[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張圖片（根據(jù)前臺(tái)的name名稱(chēng)得到上傳的文件） 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/"; // 創(chuàng)建文件 File dirPath = new File(ctxPath); if (!dirPath.exists()) { dirPath.mkdirs(); // 以時(shí)間為文件名 Date date = new Date(); SimpleDateFormat sdformat = new SimpleDateFormat("yyyyMMddHHmmss");// 24小時(shí)制 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 { // 根據(jù)UserId查詢(xún)培訓(xùn)師 Long userId = FrontShiroUtil.getUserId(); if (null != userId) { trainer.setUserId(userId); // 更新培訓(xùn)師頭像 trainerDbSvc.updateTrainerPhoto(trainer); } catch (Exception e) { e.printStackTrace(); return AjaxResult.createSuccess(trainer);// span AjaxResult 可修改 /span * 截取區(qū)域上傳圖片測(cè)試 * @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 { // 根據(jù)UserId查詢(xún)培訓(xùn)師 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; // 以小邊為準(zhǔn)(原圖尺寸) if (w h) { l = w; } else { l = h; // 以小邊為準(zhǔn)(縮略圖尺寸) Integer l2 = 0; if (imgWidth imgHeight) { l2 = imgWidth; } else { l2 = imgHeight; Integer x = (x1 * l) / l2;// 起點(diǎn)x Integer y = (y1 * l) / l2;// 起點(diǎn)y Integer xs = (x2 * l) / l2;// 終點(diǎn)x 對(duì)角線(xiàn)位置 Integer ys = (y2 * l) / l2;// 終點(diǎn)y 對(duì)角線(xiàn)位置 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); // 更新培訓(xùn)師頭像 trainerDbSvc.updateTrainerPhoto(trainer); return mav; } 工具類(lèi)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; * 圖片截取工具類(lèi) 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: 根據(jù)原圖與裁切size截取局部圖片 /p * @param srcImg 源圖片 * @param output 圖片輸出流 * @param rect 需要截取部分的坐標(biāo)和大小 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 支持的圖片類(lèi)型 : [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); }// 類(lèi)型和圖片后綴全部小寫(xiě)，然后判斷后綴是否合法 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 轉(zhuǎn)換為ImageInputStream iis = ImageIO.createImageInputStream(fis); // 根據(jù)圖片類(lèi)型獲取該種類(lèi)型的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: 根據(jù)圖片路徑生成縮略圖 /p * @param imagePath 原圖片路徑 * @param w 縮略圖寬 * @param h 縮略圖高 * @param prevfix 生成縮略圖的前綴 * @param force 是否強(qiáng)制按照寬高生成縮略圖(如果為false，則生成最佳比例縮略圖) public void thumbnailImage(File srcImg, OutputStream output, int w, int h, String prevfix, boolean force){ if(srcImg.exists()){ try { // ImageIO 支持的圖片類(lèi)型 : [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); }// 類(lèi)型和圖片后綴全部小寫(xiě)，然后判斷后綴是否合法 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); // 根據(jù)原圖與要求的縮略圖比例，找到最合適的縮略圖比例 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); // 圖片參數(shù) ImageReadParam param = reader.getDefaultReadParam(); // 100，200是左上起始位置，300就是取寬度為300的，就是從100開(kāi)始取300寬，就是橫向100~400，同理縱向200~350的區(qū)域就取高度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" !-- one of the properties available; the maximum file size in bytes property name="maxUploadSize" value="9999999999"/ /bean 插件連接http://download.csdn.net/download/u014596302/9572377樣式?jīng)]調(diào) 有點(diǎn)丑功能都有。更多編程語(yǔ)言

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：JS對(duì)HTML表格進(jìn)行增刪改操作

下一篇：如何使用html5的Page Visibility API來(lái)實(shí)現(xiàn)獲取焦點(diǎn)js事件