JCrop+ajaxUpload 图像切割上传的实例代码


Posted in Javascript onJuly 20, 2016

先给大家展示下效果图:

JCrop+ajaxUpload 图像切割上传的实例代码

页面代码

里面用户的uuid是写死的test

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE>
<html lang="en">
<head>
<title>用户头像剪裁</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<link rel="stylesheet" href="resources/Jcrop/css/jquery.Jcrop.css">
<link rel="stylesheet" href="resources/css/photo.css">
<script src="resources/js/jquery.min.js"></script>
<script src="resources/Jcrop/js/jquery.Jcrop.js"></script>
<script src="resources/js/ajaxfileupload.js"></script>
</head>
<body>
<div class="container">
<div class="row">
<div class="span12">
<div class="jc-demo-box">
<div class="page-header">
<h1>头像剪裁</h1>
</div>
<img src="resources/img/test.jpg" id="target" />
<div id="preview-pane" >
<div class="preview-container">
<img src="resources/img/test.jpg" class="jcrop-preview"/>
</div >
<div style='float:left;display:inline;'>
<a class='btn_addPic' href="javascript:void(0);">
<span><EM>+</EM>添加图片</span> 
<input id="upload_image" type="file" name="upimage" accept="image/*" class = "filePrew"/>
</a>
</div>
<div style='float:right;display:inline;'>
<a class='btn_addPic' href="javascript:void(0);" onclick='submit()'>
<span>提交</span> 
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</body>
<script type="text/javascript">
var global_api = "";
var boundx ="";//页面图片宽度
var boundy ="";//页面图片高度
var tag = false;
$(function() {
// Create variables (in this scope) to hold the API and image size
//创建变量(在这个范围)的API和图像大小
var jcrop_api,
// Grab some information about the preview pane
//获取一些信息预览窗格
$preview = $('#preview-pane'),
$pcnt = $('#preview-pane .preview-container'),
$pimg = $('#preview-pane .preview-container img'),
xsize = $pcnt.width(),
ysize = $pcnt.height();
$('#target').Jcrop({
onChange: updatePreview,
onSelect: updatePreview,
aspectRatio: xsize / ysize
},function(){
// Use the API to get the real image size
//使用API来获得真实的图像大小
var bounds = this.getBounds();
boundx = bounds[0];
boundy = bounds[1];
// Store the API in the jcrop_api variable
//jcrop_api变量中存储API
jcrop_api = this;
// Move the preview into the jcrop container for css positioning
//预览进入jcrop容器css定位
$preview.appendTo(jcrop_api.ui.holder);
});
function updatePreview(c)
{
if (parseInt(c.w) > 0)
global_api=c;
{
var rx = xsize / c.w;
var ry = ysize / c.h;
$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'
});
}
};
//=======选择图片回显===============
$('#upload_image').change(function(event) {
// 根据这个 <input> 获取文件的 HTML5 js 对象
var files = event.target.files, file; 
if (files && files.length > 0) {
// 获取目前上传的文件
file = files[0];
// 下面是关键的关键,通过这个 file 对象生成一个可用的图像 URL
// 获取 window 的 URL 工具
var URL = window.URL || window.webkitURL;
// 通过 file 生成目标 url
var imgURL = URL.createObjectURL(file);
// 用这个 URL 产生一个 <img> 将其显示出来
$('.jcrop-holder img').attr('src', imgURL);
$('.preview-container img').attr('src', imgURL);
}
});
//=============是否选择了本地图片==================
$("#upload_image").change(function(){
tag=true;
});
});
//========================================================
//======图片保存===========
function submit(){
if(tag&&global_api != ""){
ajaxFileUpload();
}else{
alert('你是不是什么事情都没干?');
}
}
//ajax文件上传
function ajaxFileUpload() {
$.ajaxFileUpload({
url: 'uploadphoto', //用于文件上传的服务器端请求地址
secureuri: false, //一般设置为false
fileElementId: 'upload_image', //文件上传空间的id属性
dataType: 'json', //返回值类型 一般设置为json
data:{x:global_api.x,y:global_api.y,w:global_api.w,h:global_api.h,pw:boundx,ph:boundy,unid:'test'}, //一同上传的数据 
success: function (data){ //服务器成功响应处理函数
if(data.result){
alert('成功');
}else{
alert('失败');
}
window.location.reload();//刷新当前页面
}
}
);
}
</script>
</html>

后台代码

@ResponseBody
@RequestMapping("uploadphoto")
public Map<String, Object> uploadPhoto(@RequestParam("upimage") MultipartFile imageFile, HttpServletRequest request,
HttpServletResponse response) throws Exception {
Map<String, Object> result = new HashMap<String, Object>();
boolean tag =false;
String unid = request.getParameter("unid");
String x = request.getParameter("x");
String y = request.getParameter("y");
String h = request.getParameter("h");
String w = request.getParameter("w");
// 页面实际图片宽高
String pheight = request.getParameter("ph");
String pweight = request.getParameter("pw");
// 切图参数
int imageX = Integer.parseInt(x);
int imageY = Integer.parseInt(y);
int imageH = Integer.parseInt(h);
int imageW = Integer.parseInt(w);
int srcH = Integer.parseInt(pheight);
int srcW = Integer.parseInt(pweight);
String realPath = request.getSession().getServletContext().getRealPath("/");
String resourcePath = "resources/uploadImages/";
try {
if (imageFile != null) {
if (FileUploadUtil.allowUpload(imageFile.getContentType())) {
// 这里开始截取操作
byte[] b = ImageCut.imgCut(imageFile.getInputStream(), imageX, imageY, imageW, imageH, srcW, srcH);
if (b != null) {
// 存入数据库
User user = userService.selectByPrimaryKey(unid);
user.setPhoto(b);
tag = (userService.updateByPrimaryKeySelective(user)==1)?tag=true:tag;
result.put("result", tag);
}
}
}
} catch (Exception e) {
e.printStackTrace();
}
result.put("result", tag);
return result;
}

图像切割工具类

package com.ssm.demo.utils;
import java.awt.Graphics;
import java.awt.Image;
import java.awt.Toolkit;
import java.awt.image.BufferedImage;
import java.awt.image.CropImageFilter;
import java.awt.image.FilteredImageSource;
import java.awt.image.ImageFilter;
import java.io.ByteArrayOutputStream;
import java.io.InputStream;
import javax.imageio.ImageIO;
public class ImageCut {
/**
* 截取图片
* 
* @param srcImageFile
* 原图片地址
* @param x
* 截取时的x坐标
* @param y
* 截取时的y坐标
* @param desWidth
* 截取的宽度
* @param desHeight
* 截取的高度
* @param srcWidth
* 页面图片的宽度
* @param srcHeight
* 页面图片的高度
* 
*/
public static byte[] imgCut(InputStream input, int x, int y, int desWidth, int desHeight, int srcWidth,
int srcHeight) {
try {
Image img;
ImageFilter cropFilter;
BufferedImage bi = ImageIO.read(input);
if (srcWidth >= desWidth && srcHeight >= desHeight) {
Image image = bi.getScaledInstance(srcWidth, srcHeight, Image.SCALE_DEFAULT);
cropFilter = new CropImageFilter(x, y, desWidth, desHeight);
img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));
BufferedImage tag = new BufferedImage(desWidth, desHeight, BufferedImage.TYPE_INT_RGB);
Graphics g = tag.getGraphics();
g.drawImage(img, 0, 0, null);
g.dispose();
// 输出文件
ByteArrayOutputStream out = new ByteArrayOutputStream();
ImageIO.write(tag, "JPEG", out);
return out.toByteArray();
}
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
}

以上所述是小编给大家介绍的JCrop+ajaxUpload 图像切割上传的实例代码,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
Javascript查询DBpedia小应用实例学习
Mar 07 Javascript
我的Node.js学习之路(四)--单元测试
Jul 06 Javascript
js使用递归解析xml
Dec 12 Javascript
详解JavaScript数组的操作大全
Oct 19 Javascript
JavaScript类型检测之typeof 和 instanceof 的缺陷与优化
Jan 13 Javascript
使用JS实现图片展示瀑布流效果(简单实例)
Sep 06 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
详解jquery validate实现表单验证 (正则表达式)
Jan 18 Javascript
使用百度地图实现地图网格的示例
Feb 06 Javascript
Vue插件之滑动验证码用法详解
Apr 05 Javascript
jQuery实现推拉门效果
Oct 19 jQuery
Vue 401配合Vuex防止多次弹框的案例
Nov 11 Javascript
javaScript给元素添加多个class的简单实现
Jul 20 #Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 #Javascript
JavaScript DOM 对象深入了解
Jul 20 #Javascript
JavaScript中的splice方法用法详解
Jul 20 #Javascript
Bootstrap被封装的弹层
Jul 20 #Javascript
必备的JS调试技巧汇总
Jul 20 #Javascript
JavaScript的==运算详解
Jul 20 #Javascript
You might like
杏林同学录(二)
2006/10/09 PHP
php读取文件内容的几种方法详解
2013/06/26 PHP
js几个不错的函数 $$()
2006/10/09 Javascript
jquery 最简单易用的表单验证插件
2010/02/27 Javascript
JavaScript高级程序设计 读书笔记之十一 内置对象Global
2012/03/07 Javascript
js触发asp.net的Button的Onclick事件应用
2013/02/02 Javascript
jquery改变disabled的boolean状态的三种方法
2013/12/13 Javascript
JavaScript通过join函数连接数组里所有元素的方法
2015/03/20 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
2015/09/11 Javascript
APP中javascript+css3实现下拉刷新效果
2016/01/27 Javascript
JavaScript中子对象访问父对象的方式详解
2016/09/01 Javascript
JS+HTML5 FileReader对象用法示例
2017/04/07 Javascript
webpack构建换肤功能的思路详解
2017/11/27 Javascript
浅谈Angular HttpClient简单入门
2018/05/04 Javascript
json字符串传到前台input的方法
2018/08/06 Javascript
vue添加axios,并且指定baseurl的方法
2018/09/19 Javascript
微信小程序地图导航功能实现完整源代码附效果图(推荐)
2019/04/28 Javascript
js实现贪吃蛇小游戏(加墙)
2020/07/31 Javascript
[02:28]DOTA2亚洲邀请赛 LGD战队巡礼
2015/02/03 DOTA
python中range()与xrange()用法分析
2016/09/21 Python
小白如何入门Python? 制作一个网站为例
2018/03/06 Python
Python 查找list中的某个元素的所有的下标方法
2018/06/27 Python
kaggle+mnist实现手写字体识别
2018/07/26 Python
pytorch自定义初始化权重的方法
2019/08/17 Python
python等差数列求和公式前 100 项的和实例
2020/02/25 Python
详解Python直接赋值,深拷贝和浅拷贝
2020/07/09 Python
CSS3 Backgrounds属性相关介绍
2011/05/11 HTML / CSS
canvas实现图片马赛克的示例代码
2018/03/26 HTML / CSS
中海讯通笔试题
2015/09/15 面试题
社团2014年植树节活动总结
2014/03/11 职场文书
2016年教师寒假学习心得体会
2015/10/09 职场文书
新员工实习期个人工作总结
2015/10/15 职场文书
2019年第四季度财务部门工作计划
2019/11/02 职场文书
在js中修改html body的样式
2021/11/11 Javascript
详解Python中__new__方法的作用
2022/03/31 Python
js基于div丝滑实现贝塞尔曲线
2022/09/23 Javascript