- 浏览: 558058 次
- 性别:
- 来自: 济南
文章分类
- 全部博客 (144)
- struts (1)
- 数据库 (13)
- Ext (4)
- mysql (10)
- PHP (2)
- informix (1)
- js (9)
- java (41)
- struts2 (9)
- wap (2)
- 浏览器 (2)
- hibernate (1)
- android (19)
- ibatis (2)
- css (1)
- 上传 html (1)
- kindeditor (1)
- sql service (2)
- spring (7)
- xml (1)
- oracle (1)
- log4j (2)
- 日期 (2)
- swing (5)
- jquery (4)
- eclipse (4)
- Maven (1)
- BUG (5)
最新评论
-
msdghs:
LZ你好,看了你的文章略有所获,但是里面的一些机制不是很明白, ...
spring quartz集群配置 -
linksky1018:
是我弄错啦,我忘了进行url解码了
java 汉字转Unicode -
linksky1018:
纯汉字转换还行
java 汉字转Unicode -
linksky1018:
貌似有问题吧
java 汉字转Unicode -
kizz:
谢谢您,帮了大忙
struts2 上传 验证图片大小 长宽
Jcrop 是一个功能强大的 jQuery 图像裁剪插件,结合后端程序可以快速的实现图片裁剪的功能。
1、先将图片上传至服务器,返回上传后的路径显示在客户端,上传成功后设置jcrop
2、本地裁剪,获得宽、高、x、y四个值,提交至服务器,由Java代码对图片流进行裁剪,本示例使用的是云存储,所以需要将原文件从云存储上获得流
官方详细示例:http://code.ciaoca.com/jquery/jcrop/
1、先将图片上传至服务器,返回上传后的路径显示在客户端,上传成功后设置jcrop
var c = {"x": 0, "y": 0, "x2": 295, "y2": 413, "w": 295, "h": 413}; $preview = $('#preview-pane'); $pcnt = $('#preview-pane .preview-container'); $pimg = $('#preview-pane .preview-container img'); xsize = $pcnt.width(); ysize = $pcnt.height(); $("#uploadIdentityImg").Jcrop({ bgColor: 'black', bgFade: true, bgOpacity: .4, aspectRatio: 0.71428571 / 1, minSize: [295, 413], maxSize: [590, 826], aspectRatio: xsize / ysize, setSelect: [c.x, c.y, c.x2, c.y2], //设定4个角的初始位置 onChange: currobj.showCoords, //当裁剪框变动时执行的函数 onSelect: currobj.showCoords //当选择完成时执行的函数 }, function () { // Use the API to get the real image size var bounds = this.getBounds(); boundx = bounds[0]; boundy = bounds[1]; // Store the API in the jcrop_api variable jcrop_api = this; $preview.appendTo(jcrop_api.ui.holder); }); showCoords: function (c) { if (parseInt(c.w) > 0) { var rx = xsize / c.w; var ry = ysize / c.h; imgH = parseInt(c.h); imgW = parseInt(c.w); imgX = parseInt(c.x); imgY = parseInt(c.y); $pimg.css({ width: Math.round(rx * boundx) + 'px', height: Math.round(ry * boundy) + 'px', marginLeft: '-' + Math.round(rx * c.x) + 'px', marginTop: '-' + Math.round(ry * c.y) + 'px' }); } }
2、本地裁剪,获得宽、高、x、y四个值,提交至服务器,由Java代码对图片流进行裁剪,本示例使用的是云存储,所以需要将原文件从云存储上获得流
@RequestMapping("jcripHeadImg") @ResponseBody public Map<String,Object> jcripHeadImg( @RequestParam(required=false,value="imgW",defaultValue="")int imgW, @RequestParam(required=false,value="imgH",defaultValue="")int imgH, @RequestParam(required=false,value="imgX",defaultValue="")int imgX, @RequestParam(required=false,value="imgY",defaultValue="")int imgY, @RequestParam(required=false,value="imgFileName",defaultValue="")String imgFileName){ //根据文件名 获得文件流 ImageInputStream iis = null; InputStream is=null; Map<String,Object> map=new HashMap<>(); map.put("status","n"); try { String type=imgFileName.substring(imgFileName.lastIndexOf(".")+1,imgFileName.length()); is= remoteFileService.downloadIS(imgFileName, type); Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName(type); ImageReader reader = it.next(); // 获取图片流 iis = ImageIO.createImageInputStream(is); /* * <p>iis:读取源.true:只向前搜索 </p>.将它标记为 ‘只向前搜索’。 * 此设置意味着包含在输入源中的图像将只按顺序读取,可能允许 reader 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。 */ reader.setInput(iis, true); ImageReadParam param = reader.getDefaultReadParam(); /* * 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域,通过 Rectangle 对象 * 的左上顶点的坐标(x,y)、宽度和高度可以定义这个区域。 */ Rectangle rect = new Rectangle(imgX, imgY, imgW, imgH); // 提供一个 BufferedImage,将其用作解码像素数据的目标。 param.setSourceRegion(rect); BufferedImage bi = reader.read(0, param); ImageOutputStream imOut =ImageIO.createImageOutputStream(bi); InputStream nIs =getImageStream(type,bi); String newFileName=remoteFileService.upload(nIs, imgFileName , type); map.put("status","y"); map.put("filename",newFileName); } catch (IOException e) { e.printStackTrace(); } return map; } /** * 将图片流文件转为inputstrame流 * @param type * @param bi * @return */ public InputStream getImageStream(String type,BufferedImage bi){ InputStream is = null; ByteArrayOutputStream bs = new ByteArrayOutputStream(); ImageOutputStream imOut; try { imOut = ImageIO.createImageOutputStream(bs); ImageIO.write(bi, type,imOut); is= new ByteArrayInputStream(bs.toByteArray()); } catch (IOException e) { e.printStackTrace(); } return is; }
官方详细示例:http://code.ciaoca.com/jquery/jcrop/
发表评论
-
不同版本的web.xml配置
2016-07-12 10:33 1101web.xml v2.3 <?xml version ... -
AutoComplete for jQuery
2015-04-10 13:33 524https://www.devbridge.com/sourc ... -
ajaxfileupload 提示文件另存为
2015-01-26 10:14 711使用Jquery 的插件AjaxFileUpload做上传时, ... -
jquery 根据表格行ID 获得数据
2015-01-14 10:53 2597var result=$("#listtab t ... -
java.lang.OutOfMemoryError: PermGen space
2014-12-12 15:24 757解决办法增大tomcat JVM内存设置 参数说明: -Xm ... -
struts2的iterator标签遍历HashMap
2014-11-17 10:56 781hashmap中保存的是string,object,objec ... -
java session统计在线人数
2014-11-17 09:00 1008首先创建监听器,监听器实现ServletContextAttr ... -
Log4j写入数据库详解
2014-09-04 16:10 855log4j是一个优秀的开源日志记录项目,我们不仅可以对输出 ... -
将jar文件打包成exe安装文件(三)
2014-08-13 09:43 924通过前两篇 将jar文件打包成exe安装文件(一) ... -
将jar文件打包成exe安装文件(二)
2014-08-13 09:34 1102在上一篇中《将jar文件打包成exe安装文件(一)》介绍了,如 ... -
将jar文件打包成exe安装文件(一)
2014-08-13 09:26 1604将java项目打成exe可运 ... -
如何用java jdbc 向数据库表插入大数据量
2013-11-26 17:17 2046jvm:-Xmx1024m size = 1000000,可以 ... -
java获得当前时间一小时前的时间
2013-10-29 15:30 3495Calendar calendar = Calendar. ... -
log4j 日志输出至数据库
2013-10-28 11:19 20301、首先配置log4j ### set log leve ... -
使用Dom4j合并多个xml文件
2013-09-25 16:55 4940SAXReader saxReader = new SAX ... -
Java利用Ibatis的ScriptRunner解析sql
2013-09-11 13:28 5489需要导入mybatis-3.0.5.jar包 java直接解析 ... -
java 解析sql脚本
2013-08-29 14:27 1595java执行sql脚本,一种是解析sql脚本,生成每一条sql ... -
Spring 泛型 反射调用方法
2013-08-26 14:52 1706Object cz=springUtil.getBean( ... -
spring中使用ApplicationContext
2013-08-26 14:47 1068声明一个SpringUtil,并且实现ApplicationC ... -
Java中如何获得所有实现该接口的子类
2013-08-26 09:58 2958public static List<Class&g ...
相关推荐
在"JS特效-图片相册"的上下文中,Jcrop可以作为图片管理组件的一部分,用于用户上传并裁剪图片,创建个性化的图片集。与其他图片展示库(如Fancybox或Lightbox)结合使用,可以提供一个完整的图片浏览和编辑体验。 ...
**jQuery图片裁剪插件Jcrop.js** Jcrop.js是一款基于jQuery的开源图片裁剪工具,它为网页开发者提供了一种高效、灵活的方式来实现图像裁剪功能。在网页设计中,用户经常需要上传图片并根据需求进行裁剪,以适应特定...
本文将详细介绍如何利用Jcrop库在移动端实现图片的上传与任意尺寸裁剪。 Jcrop是一款强大的JavaScript图像裁剪工具,它允许用户通过网页交互方式自由选择图片的裁剪区域。这个库基于jQuery,因此需要先引入jQuery...
<... <head> <meta charset="utf-8" />...jQuery图片裁剪插件Jcrop.js<... Jcrop.js实现的一款功能强大的jQuery图片裁剪插件,可以结合后端程序快速的实现图像裁剪的功能,右侧有3个图像缩略图尺寸可选。
Jcrop是一款基于jQuery的开源图片裁剪插件,它提供了简单易用的API,使得开发者能够轻松地在网页中实现按比例或自由裁剪图片的功能。本文将详细介绍Jcrop的特性、使用方法以及如何通过其提供的示例快速上手。 首先...
1.canvas上传图片base64-有裁剪功能-Jcrop.js ...3.4.可以设置是否-有裁剪图片大小条件,limitImg = true,可手动更改 可预览图片地址 https://blog.csdn.net/qq_29132907/article/details/82458365
Jcrop是一款广泛使用的JavaScript图像裁剪工具,它允许用户在网页上交互式地选择和裁剪图片。这个“jcrop图片裁剪demo”是展示如何集成和应用Jcrop的一个实例,方便开发者快速理解和使用。下面将详细介绍Jcrop的核心...
上述代码中,`#target`是待裁剪图片的ID,`Jcrop();`是初始化Jcrop的函数,通过jQuery选择器将Jcrop应用到指定的图片元素上。 Jcrop提供了一些关键配置选项,以满足不同需求。例如,你可以设置选区的最小和最大尺寸...
- **图片裁剪服务**:提供一个简单的图片裁剪工具,用户可以快速地调整和裁剪图片。 - **屏幕截图**:虽然Jcrop本身不直接支持屏幕截图,但可以结合其他截图库,让用户选择截取屏幕的特定部分。 总的来说,jQuery ...
**jQuery Jcrop是一款非常实用的JavaScript图片裁剪工具,它为网页开发人员提供了一种简单易用的方法来实现用户交互式的图像裁剪功能。在网页上,用户可以自由选择图片的裁剪区域,从而实现自定义尺寸的图片生成。**...
《使用Jcrop进行图片裁剪的深度解析》 在网页应用中,经常需要对上传的图片进行裁剪,以满足特定尺寸或者比例的要求。Jcrop是一款强大的JavaScript图像裁剪工具,它提供了简单易用的API,使用户能够在浏览器端轻松...
**jQuery Jcrop 插件详解:打造跨浏览器的图片裁剪功能** 在Web开发中,图片裁剪功能常用于用户上传头像、编辑照片或进行个性化定制等场景。`jQuery Jcrop`是一款强大的JavaScript插件,它使得在浏览器中实现图片...
Jcrop是一款广泛应用于Web开发中的JavaScript图片裁剪插件,它允许用户在网页上选择并裁剪图片,常用于头像上传、图片编辑等场景。本文将深入探讨Jcrop插件如何实现高宽比例固定的裁剪功能以及效果预览。 Jcrop的...
Jcrop是一款强大的JavaScript图片裁剪库,它允许用户在前端自由地选择和裁剪图片,广泛应用于网页中的图片预览、上传前的裁剪等场景。这款工具以其直观的用户界面和灵活的配置选项,深受开发者喜爱。 **一、Jcrop...
`jCrop` 是一个基于 jQuery 的强大图片裁剪插件,它允许用户在浏览器端选择并裁剪图像,然后将这些裁剪信息发送到服务器进行进一步处理。在这个项目中,`jCrop` 被用来配合 PHP 完成图片的上传和剪切功能。 1. **...
通过以上的介绍,我们可以看到jcrop在图片裁剪上传方面提供了强大的功能,是前端开发者处理图片上传需求的一个理想选择。在实际项目中,合理地运用jcrop,可以提高用户体验,同时简化后端处理工作。
Jcrop是一款强大的JavaScript图像裁剪工具,它允许用户在前端选择并定义感兴趣的图像区域,然后将这些坐标信息传递给后端进行精确的图片裁剪。在本示例中,我们将深入探讨如何结合Jcrop与Java技术,实现一个完整的...
这个"java+jq+jcrop缩放裁剪上传图片"的主题涵盖了三个关键部分:Java后端处理、jQuery(jq)前端交互以及Jcrop图像裁剪库的使用。下面将详细解释这三个方面的知识点。 首先,让我们来看看前端部分。jQuery(jq)是...
Jcrop是一款强大的JavaScript图像裁剪工具,它允许用户在网页上选取图像的特定区域,并能够获取到所选区域的坐标和宽高信息。这个功能在许多场景下非常实用,比如用户头像裁剪、产品图片定制、照片编辑等。在本文中...