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

2024-09-28 13:48:17

先给大家展示下效果图：

页面代码

里面用户的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 图像切割上传的实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

jQuery插件jcrop+Fileapi完美实现图片上传+裁剪+预览的代码分享

网页端裁剪图片,不需要经过服务器. 这个是用 https://github.com/mailru/FileAPI 框架实现的.配合jcrop. 高级浏览器使用 canvas 裁剪,ie6 7 8使用 flash过度. 核心代码: var el = $('input').get(0); seajs.use(['gallery/jcrop/0.9.12/jcrop.css','gallery/jcrop/0.9.12/jcrop.js'] ,function(){ FileAPI.event.o
PHP+ajaxfileupload+jcrop插件完美实现头像上传剪裁

昨天花了点时间整合了一下头像插件东拼西凑的成果先来看下效果 1.先使用ajaxfileupload插件做异步上传.这个地方我本来想做个上传进度的效果,但技术有限失败了.上传按钮我还做了一个文件大小的限制,但是由于浏览器兼容性的问题,不完美在IE6--IE9之间还有很多问题需要解决 getFileSize函数是用于判断文件大小的函数复制代码代码如下: function getFileSize(fileName) { var byteSize = 0;
jQuery AjaxUpload 上传图片代码

本次使用AJAXUPLOAD做为上传客户端无刷上传插件,其最新版本为3.9,官方地址:http://valums.com/ajax-upload/ 在页面中引入 jquery.min.1.4.2.js 和 ajaxupload.js <script src="Scripts/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="Scripts/aj
jquery插件ajaxupload实现文件上传操作

本文实例讲述了jquery插件ajaxupload实现文件上传操作代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 图1 文件上传前图2 文件上传后具体代码如下: 1.创建页面并编写HTML 上传文档: <div class="uploadFile"> <span id="doc"><input type="text" disabled="disabled" /></sp
JCrop+ajaxUpload 图像切割上传的实例代码

先给大家展示下效果图: 页面代码里面用户的uuid是写死的test <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE> <html lang="en"> <head> <title>用户头像剪裁</title>
PHP之图片上传类实例代码(加了缩略图)

有缩略图功能但是感觉不全面,而且有点问题,继续学习,将来以后修改下 <form action="<?php $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data" method="post" ><input type="text" name="name" /><input type="file&q
Ajax异步上传文件实例代码分享

非常不多说,直接给大家上干货,写的不好还请见谅. 具体代码如下所示: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width" /> <script src="~/Scripts/jquery-1.8.2.min.js"></script> <title>Ind
JSP使用Common FileUpload组件实现文件上传及限制上传类型实例代码

1.将commons-fileupload-1.3.3.jar复制到Web应用的lib文件夹下,在WebRoot目录下创建limit.jsp页面,在该页面中添加一个文件域的表单,设置类型为 multipart/form-data.代码如下: <body> <h2>上传图书课件</h2> <form action="LimitFile" name="one" enctype="multipart/form-da
jQuery自定义图片上传插件实例代码

摘要 1.jquery自定义插件方法 2.表单file样式调整 3.利用formData,ajax上传图片 4.js,css弹出层 5.springmvc上传图片效果调用方式 $("#picUrl").imgUpload({}),在代码内部为调用对象绑定了click事件,点击弹出上传界面. $(function(){ $("#picUrl").imgUpload({url:'<%=basePath%>'+'file/upload.do'}) $(&q
webuploader在springMVC+jquery+Java开发环境下的大文件分片上传的实例代码

注意: 1,webuploader上传组件会和jQuery自带的上传组件冲突,所以不要使用<form>标签中添加上传文件的属性; enctype="multipart/form-data" 2.并且屏蔽ApplicationContext-mvc.xml里面的拦截配置!  <!--新增加的webuploader上传组件,必须要屏蔽这里的拦截机制 <bean id="multipartRes
BootStrap fileinput.js文件上传组件实例代码

1.首先我们下载好fileinput插件引入插件 <span style="font-size:14px;"><link type="text/css" rel="stylesheet" href="fileinput/css/fileinput.css" rel="external nofollow" /> <script type="text/javascript
JS多文件上传的实例代码

废话不多说了,具体实现代码如下所示: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script src="./jquery-1.9.1.min.js"></script> </head> <body> <fo
PHP+AjaxForm异步带进度条上传文件实例代码

在使用ajaxForm方法之前,首先需要安装form.js的插件,网上有: 一.首先说用法,ajaxForm可以接收0或1个参数,该参数可以是一个变量.一个对象或回调函数,这个对象主要有以下参数: var object= { url:url, //form提交数据的地址 type:type, //form提交的方式(method:post/get) target:target, //服务器返回的响应数据显示的元素(Id)号 beforeSerialize:function(){} //序列化提交
Ajax表单异步上传文件实例代码（包括文件域）

1.起因做前台页面时,需要调用WebAPI的Post请求,发送一些字段和文件(相当于把表单通过ajax异步发送出去,得到返回结果),然后得到返回值判断是否成功. 2.尝试先是尝试了一下 "jQuery Form Plugin" ,这玩意就是的巨大的坑,实现他和jquery1.9.2兼容性就不是太好,好不容易把$.browser的问题解决了,发现用他上传文件得不到返回值. $("#view").submit( $("#view").ajaxSu

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

相关推荐

随机推荐