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, //是否需要安全协议，一般设置为falsefileElementId: 'photoFile', //文件上传域的IDdataType: 'json', //返回值类型 一般设置为jsonsuccess: 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" style="margin-top:20px;"><div class="row"><div class="col-xs-9 pull-right"><div class="media media-heading"><h4 style="font-weight: 600;float: left">上传照片</h4></div><div class="row" style="margin-top: 15px"><div class="col-lg-12"><div class="btn-group" style="float: left"><div class="btn btn-default" role="button" style="position: relative; overflow: hidden;background-color: #8DC21F;color: #ffffff;"><span>+添加照片</span><input id="photoFile"  type="file" name="photoFile" οnchange="addFile(this);" style="height:34px;position: absolute; right: 0px; top: 0px; margin: 0px; padding: 0px; cursor: pointer; opacity: 0;"></div></div><span style="float: left; margin-left: 15px; color: #888888"><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" style="width: 320px; height: 320px"></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" style="margin-top: 15px; margin-left: 80px"><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 style="float: left; width: 50%;"><p class="instructions">Click and drag on the image to select an area.</p><div style="width: 302px;height: 302px;"><div style="width: 302px;height:302px;border: 1px solid #aaa;"><div style="line-height: 300px; text-align: center; overflow: hidden; z-index: 1001; width: 300px; height: 300px; position: relative; left: 50%; top: 50%; margin-left: -150px; margin-top: -150px; "><img id="photo" src="/images/${(trainer.photo)!""}" style="max-height:300px;max-width: 300px;" /></div></div></div></div><div style="float: left; width: 50%;"><p style="font-size: 110%; font-weight: bold; padding-left: 0.1em;">Selection Preview</p><div style="width: 100px; height: 100px;"><div id="preview" style="width: 100px; height: 100px; overflow: hidden;"><img src="/images/${trainer.photo!}" style="width: 100px; height: 100px;" /></div></div><table><thead><tr><th colspan="2"    style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">Coordinates</th><th colspan="2"    style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">Dimensions</th></tr></thead><tbody><tr><td style="width: 10%;"><b>X<sub>1</sub>:</b></td><td style="width: 30%;"><input type="text" id="x1" value="-" /></td><td style="width: 20%;"><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

回显一下数据

/*** 跳到上传头像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 style="font-family: Arial, Helvetica, sans-serif;">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;// 起点xInteger y = (y1 * l) / l2;// 起点yInteger 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 转换为ImageInputStreamiis = ImageIO.createImageInputStream(fis);// 根据图片类型获取该种类型的ImageReaderImageReader 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

-->

</bean>

插件连接

http://download.csdn.net/download/u014596302/9572377

样式没调有点丑功能都有

spring(java,js,html) 截图上传相关推荐

JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
java实现MinIO文件上传，并将视频文件截图，将视频封面及视频通过MinIo上传到服务器中
java实现MinIO文件上传,并将视频文件截图,将视频封面及视频通过MinIo上传到服务器中配置完毕,接下来开始代码编写. 说明总过程分为两步. 1.配置MinIO的环境. 2.代码编写. 下面 ...
Spring Boot 实现多图片上传并回显，涨姿势了～
上传 Controller的代码非常简单,由于用了SpringMVC框架,所以直接用MultipartFile来接即可.由于是多图片上传所以用数组来接.此处应该注意参数名应该和<input> ...
Java实现Nginx图片上传
简介文件上传功能,是信息系统开发中的常用功能,在传统的开发流程中,前端通过表单上传文件,后端进行文件处理.不利之处在于后端需要写重复代码,每开发一个包含上传功能的系统,就需要写一遍上传逻辑. 当文 ...
java获取ajax上传的文件,Java使用Ajax异步上传文件
相关代码示例: html代码片段: 名称 class="layui-input"> 描述文件请选择配置文件立即提交重置 js代码片段: //上传配置文件 $(&quo ...
Spring MVC-09循序渐进之文件上传(基于Servlet3.0+内置功能)
概述测试源码概述 Spring MVC-09循序渐进之文件上传(基于Apache Commons FileUpload) 上篇博文我们说了基于Apache Commons FileUpload的 ...
Java实现用户头像上传（修改默认文件大小限制）
概述每次说起文件上传,就不得不提一下前端的实现方式,说来也奇怪,本博主最热门的博客居然也是文件上传,3万多的访问量占了总访问量的一多半:<传统form表单提交方式的文件上传与文件存储>, ...
头像截图上传两种方式（SWFUpload、一个简单易用的flash插件）
SWFUpload是一个客户端文件上传工具,最初由Vinterwebb.se开发,它通过整合Flash与JavaScript技术为WEB开发者提供了一个具有丰富功能继而超越传统<input ty ...
java分布式实现图片上传到图片服务器
java分布式实现图片上传到图片服务器操作步骤第一步第二步第三步第四步第五步第六步代码实现第七步 JS代码大功告成!! 操作步骤第一步在页面中的form表单里面增加一个inpu ...

spring(java,js,html) 截图上传

spring(java,js,html) 截图上传相关推荐

最新文章

热门文章