关于bootstrap中cropper的截图上传问题
之前做一个关于截图的东东,搞了好久终于弄好了,其主要关键是把前端截图的数据(x坐标,y坐标,宽度,高度和旋转角度)传到后台,然后在后台对图片做相关处理,记录一下方便以后查看。
后台配置为ssm。
Java代码:
/**
* headers="content-type=multipart/*"(必填),avatar_file(name),avatar_data(截图数据)
*/
@RequestMapping(params = "method=picture",headers="content-type=multipart/*",method=RequestMethod.POST)
6 public @ResponseBody Map picture(@RequestParam("avatar_file")MultipartFile file ,
String avatar_data,HttpServletRequest request){
Map map=new HashMap<>();
Map resultMap=new HashMap<>();
try { String nodepath = this.getClass().getClassLoader().getResource("/").getPath();//获取项目的绝对路径
String[] str1 = nodepath.split("wtpwebapps");
int empid=(int)request.getSession().getAttribute("empid");
String filename=file.getOriginalFilename();
String prefix = filename.substring((filename.lastIndexOf(".")+1));//获取图片后缀
System.err.println("prefix=="+prefix);
String[] str=avatar_data.split(",");
int x = (int)Math.floor(Double.parseDouble(str[0].split(":")[1]));//获取截取的x坐标
int y = (int)Math.floor(Double.parseDouble(str[1].split(":")[1]));//获取截取的y坐标
int h = (int)Math.floor(Double.parseDouble(str[2].split(":")[1])); //获取截取的高度
int w = (int)Math.floor(Double.parseDouble(str[3].split(":")[1])); //获取截取的宽度
int r = Integer.parseInt(str[4].split(":")[1].replaceAll("}", ""));//获取旋转的角度
BufferedImage cutImage = PersonalCenterController.cutImage(file,x,y,w,h,prefix,str1[0]);
BufferedImage rotateImage = PersonalCenterController.rotateImage(cutImage, r);
ByteArrayOutputStream out = new ByteArrayOutputStream();
boolean flag = ImageIO.write(rotateImage, prefix, out);
byte[] b = out.toByteArray();//转换后存入数据库
map.put("in", b);
map.put("empid", empid);
int i = pcs.Pictureupload(map);
if(i>0){
resultMap.put("result", "success");
}else{
resultMap.put("result", "defeat");
}
} catch (Exception e) {
resultMap.put("result", "error");
}
return resultMap;
} /***
* 剪裁图片
* @param file 图片 * @param dest 路径
* @param x 起点横坐标
* @param y 纵坐标
* @param w 长
* @param h 高
* @throws IOException
* @date
*/
public static BufferedImage cutImage(MultipartFile file,int x,int y,int w,int h,
String prefix,String dest) { Iterator iterator = ImageIO.getImageReadersByFormatName(prefix);
dest=dest+"/wtpwebapps/pic";//剪切图片需要依赖一个本地路径(空文件夹即可)
System.err.println(dest);
try {
ImageReader reader = (ImageReader)iterator.next();
InputStream in = file.getInputStream();//转换成输入流
ImageInputStream iis = ImageIO.createImageInputStream(in);
reader.setInput(iis, true);
ImageReadParam param = reader.getDefaultReadParam();
Rectangle rect = new Rectangle(x, y, w,h);
param.setSourceRegion(rect);
BufferedImage bi = reader.read(0,param);
ImageIO.write(bi, prefix, new File(dest));
return bi;
} catch (Exception e) {
}
return null;
}
/***
* 图片旋转指定角度
* @param bufferedimage 图像
* @param degree 角度
* @return
* @date
*/
public static BufferedImage rotateImage(BufferedImage bufferedimage, int degree) {
int w = bufferedimage.getWidth();
int h = bufferedimage.getHeight();
int type = bufferedimage.getColorModel().getTransparency();
BufferedImage img;
Graphics2D graphics2d;
(graphics2d = (img = new BufferedImage(w, h, type))
.createGraphics()).setRenderingHint(
RenderingHints.KEY_INTERPOLATION,
RenderingHints.VALUE_INTERPOLATION_BILINEAR);
graphics2d.setPaint(Color.WHITE);
graphics2d.fillRect(0, 0, w, h);
graphics2d.rotate(Math.toRadians(degree), w / 2, h / 2);
graphics2d.drawImage(bufferedimage, 0, 0,Color.WHITE, null);
graphics2d.dispose();
return img;
}
html代码:
在前端页面采用form表单提交的方式,当表单中存在文件时,注意添加 enctype='multipart/form-data' 这么个玩意,主要是用来设置表单的MIME编码。默认情况,这个编码格式是application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form-data,才能完整的传递文件数据。
1 <div id="crop-avatar">
2 <div class="avatar-view" id="imgshow">
3 <img id="image" src="" /> <!-- 显示图片的路径,我保存在数据库中的,所有填写数据库的查询即可 -->
4
5 </div>
6 <!-- Cropping modal -->
7 <div class="modal fade" id="avatar-modal" aria-hidden="true"
8 aria-labelledby="avatar-modal-label" role="dialog"
9 tabindex="-1">
10 <div class="modal-dialog modal-lg">
11 <div class="modal-content">
12 <form class="avatar-form" action='' enctype='multipart/form-data' method='post' name="form">
<!-- action填写后台路径,不用说都知道。关键是enctype='multipart/form-data'必须写。 -->
13 <div class="modal-header">
14 <button class="close" data-dismiss="modal" type="button">×</button>
15 <h4 class="modal-title" id="avatar-modal-label">更换头像</h4>
16 </div>
17 <div class="modal-body">
18 <div class="avatar-body">
19 <!-- Upload image and data -->
20 <div class="avatar-upload">
21 <input class="avatar-src" name="avatar_src" type="hidden" />
22 <input class="avatar-data" name="avatar_data" type="hidden" />
23 <label for="avatarInput">头像上传</label>
24 <input class="avatar-input" id="avatarInput" name="avatar_file" type="file" />
25
26
27 </div>
28 <!-- Crop and preview -->
29 <div class="row">
30 <div class="col-md-9">
31 <div class="avatar-wrapper" id="avatar-wrapper"></div>
32 </div>
33 <div class="col-md-3">
34 <div class="avatar-preview preview-lg"></div>
35 <div class="avatar-preview preview-md"></div>
36 <div class="avatar-preview preview-sm"></div>
37 </div>
38 </div>
39
40 <div class="row avatar-btns">
41 <div class="col-md-9">
42 <div class="btn-group">
43 <button class="btn btn-primary btn-sm"
44 data-method="rotate" data-option="-90" type="button"
45 title="Rotate -90 degrees">旋转-90度</button>
46 <button class="btn btn-primary btn-sm"
47 data-method="rotate" data-option="-45" type="button">旋转-45度</button>
48 </div>
49 <div class="btn-group">
50 <button class="btn btn-primary btn-sm"
51 data-method="rotate" data-option="90" type="button"
52 title="Rotate 90 degrees">旋转90度</button>
53 <button class="btn btn-primary btn-sm"
54 data-method="rotate" data-option="45" type="button">旋转45度</button>
55 </div>
56 </div>
57 <div class="col-md-3">
58 <button class="btn btn-primary btn-block avatar-save"
59 type="submit" id="btn">完成</button>
60 </div>
61 </div>
62
63 <div class="row avatar-btns">
64 <div class="col-md-12"> </div>
65
66
67 </div>
68 </div>
69 </div>
70 </form>
71 </div>
72 </div>
73 </div>
74 <!-- /.modal -->
75
76 <!-- Loading state -->
77 <div class="loading" aria-label="Loading" role="img"
78 tabindex="-1"></div>
79 </div>
关于bootstrap中cropper的截图上传问题的更多相关文章
- 在Asp.Net Core中配置使用MarkDown富文本编辑器实现图片上传和截图上传(开源代码.net core3.0)
我们的富文本编辑器不能没有图片上传尤其是截图上传,下面我来教大家怎么实现MarkDown富文本编辑器截图上传和图片上传. 1.配置编辑器到html页 <div id="test-edi ...
- JS打开摄像头并截图上传
直入正题,JS打开摄像头并截图上传至后端的一个完整步骤 1. 打开摄像头主要用到getUserMedia方法,然后将获取到的媒体流置入video标签 2. 截取图片主要用到canvas绘图,使用dra ...
- 头像截图上传三种方式之一(一个简单易用的flash插件)(asp.net版本)
flash中有版权声明,不适合商业开发.这是官网地址:http://www.hdfu.net/ 本文参考了http://blog.csdn.net/yafei450225664/article/det ...
- Laravel中的日志与上传
PHP中的框架众多,我自己就接触了好几个.大学那会啥也不懂啥也不会,拿了一个ThinkPHP学了.也许有好多人吐槽TP,但是个人感觉不能说哪个框架好,哪个框架不好,再不好的框架你能把源码读上一遍,框架 ...
- Spring中MultipartHttpServletRequest实现文件上传
Spring中MultipartHttpServletRequest实现文件上传 转贴自:http://my.oschina.net/nyniuch/blog/185266 实现图片上传 用户必须能 ...
- ASP.NET中扩展FileUpload的上传文件的容量
ASP.NET中扩展FileUpload只能上传小的文件,大小在4MB以内的.如果是上传大一点的图片类的可以在web.config里面扩展一下大小,代码如下 <system.web> &l ...
- Aps.net中基于bootstrapt图片上传插件的应用
Aps.net中基于bootstrapt图片上传插件的应用 在最近的项目中需要使用一个图片上传的功能,而且是多张图片同时上传到服务器的文件夹中,将图片路径存放在数据库中.为了外观好看使用了bootst ...
- 在MVC应用程序中,怎样删除上传的文件
在ASP.NET MVC应用程序中,怎样删除上传的文件. 由于上传时,真正文件是存储在应用程序某一目录,在数据库表中,只是存储其基本信息.在删除时,需要注意一下,由于没有事务可操作.Insus.NET ...
- windows中修改catalina.sh上传到linux执行报错This file is needed to run this program解决
windows中修改catalina.sh上传到linux执行报错This file is needed to run this program解决 一.发现问题 由于tomcat内存溢出,在wind ...
随机推荐
- MySQL中字符串与数字比较的坑
公司项目代码中,某枚举字段数据库表中类型是char(1),在代码中,误以为是TINYINT,所以用数字筛选,后来发现结果不对.发现了一个现象,用数字0筛选会把所有的记录给筛选出来. 经过排查发现是在M ...
- LINQ TO XML初步了解
最近简单的学习了一下LINT TO XML,写篇博客在这,方便以后查看~~ 1.常用到的类 XmlDocument -- 文档(xml文件) XmlElement -- ...
- SQLite中使用CTE巧解多级分类的级联查询
在最近的项目中使用ActiveReports报表设计器设计一个报表模板时,遇到一个多级分类的难题:需要将某个部门所有销售及下属部门的销售金额汇总,因为下属级别的层次不确定,所以靠拼接子查询的方式显然是 ...
- css 画出三角形
技术分享不一定行文累赘 这里说说最简洁的 css 画出三角形 display: inline-block; border: 10px dashed transparent; border-left: ...
- bzoj4828 [Hnoi2017]大佬
Description 人们总是难免会碰到大佬.他们趾高气昂地谈论凡人不能理解的算法和数据结构,走到任何一个地方,大佬的气场就能让周围的人吓得瑟瑟发抖,不敢言语.你作为一个OIER,面对这样的事情非常 ...
- 使用 rsync 同步
原文地址 http://www.howtocn.org/rsync:use_rsync 选项 说明 -a, ––archive 归档模式,表示以递归方式传输文件,并保持所有文件属性,等价于 -rlpt ...
- 【算法系列学习】codeforces D. Mike and distribution 二维贪心
http://codeforces.com/contest/798/problem/D http://blog.csdn.net/yasola/article/details/70477816 对于二 ...
- 《分布式Java应用之基础与实践》读书笔记四
Java代码作为一门跨操作系统的语言,最终是运行在JVM中的,所以对于JVM的理解就变得非常重要了.整体上,我们可以从三个方面来深入理解JVM. Java代码的执行 内存管理 线程资源同步和交互机制 ...
- hdu1711kmp
Given two sequences of numbers : a11, a22, ...... , aNN, and b11, b22, ...... , bMM (1 <= M <= ...
- HTML5的article和section的区别
内容区块是指将HTML页面按逻辑分割后的单位.对于页面网站来说,导航菜单.文章正文.文章的评论等每一个部分都可称为内容区块. article元素 article元素代表文档.页面或 ...