JCrop+ajaxUpload 图像切割上传

先看效果

需要的文件下载

链接：http://pan.baidu.com/s/1b8SI6M 密码：59ct

页面代码

里面用户的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 图像切割上传的更多相关文章

框架基础：ajax设计方案（三）--- 集成ajax上传技术大文件/超大文件前端切割上传，后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
前端通信：ajax设计方案（四）--- 集成ajax上传技术大文件/超大文件前端切割上传，后端进行重组
马上要过年了,哎,回家的心情也特别的激烈.有钱没钱,回家过年,家永远是舔舐伤口最好的地方.新的一年继续加油努力. 上次做了前端的ajax的上传文件技术,支持单文件,多文件上传,并对文件的格式和大小进行 ...
Ajax+Java实现大文件切割上传
技术体系:html5(formdata) + java + servlet3.0+maven + tomcat7 <!DOCTYPE html> <html> <head ...
Jcrop+uploadify+php实现上传头像预览裁剪
最近由于项目需要,所以做了一个上传头像预览并且可以预览裁剪的功能,大概思路是上传的图片先保存到服务器,然后通过ajax从服务器获取到图片信息,再利用Jcrop插件进行裁剪,之后通过PHP获取到的四个裁 ...
支持移动端裁剪图片插件Jcrop（结合WebUploader上传）
(此教程包括前端实现图片裁剪,后端进行获取裁剪区并保存) 最近有一个需求,微信公众号上传图片,支持自定义裁剪. 以前用过一款裁剪插件cropper,很久没用了,不知道对移动端操作兼容如何,重新从网上搜 ...
AjaxUpload跨域上传问题
1. 调用上传的html页面所在域名是 www.abc.com ,添加document.domain <script> document.domain = "abc.com&qu ...
AJAX-----16HTML5实现大文件切割上传
2点多接了个电话导致失眠,没办法,跑起来接着板砖了...... 废话不多说,直接走码... <!DOCTYPE html> <html lang="en"> ...
最近使用ajaxFileUpload和Jcrop来实现图片上传和截图，出现一个图片无法更换的问题
使用setImage 都无法更换刷新图片找了很久什么方法都找过,最后发现...... 原来是上传的图片的命名问题... 每次上传的图片保存后都是同样的图片, 所以返回路径都是一样... jc ...
9、面向对象以及winform的简单运用（输入输出流、图像的上传和读取）
一.输入输出流 1.概念: 输入输出流主要用于保存.读取文件,其内容保存在内存中. 2.使用方法: using System.IO; //System.IO 命名空间包含允许读写文件和数据流的类型以及 ...

随机推荐

iOS开发——开发必备OC篇&UITableView设置界面完整封装（二）
UITableView设置界面完整封装(二) 简单MVC实现UITableView设置界面之Cell右边类型设置首先来看看第一种方法证明使用,结合两种方法之后根据个人的爱好去选择就可以了, 一:使用 ...
iOS开发——多线程OC篇&多线程中的单例
多线程中的单例 #import "DemoObj.h" @implementation DemoObj static DemoObj *instance; // 在iOS中,所有对 ...
项目源码--JSP在线客服系统(SSH框架技术)源码
下载源码技术要点: 1.网站开发技术框架 2.SSH技术框架(Struct,Spring,Hibrnate) 3.JSP技术框架 4.MYSQL数据库数据存储 5.即时通讯技术 6.源码带详细的中文 ...
GNU-ARM汇编
GNU ARM 汇编指令(2008-10-29 00:16:10) 标签:linux gnu arm 汇编指令 it 分类:技术文摘第一部分 Linux下ARM汇编语法尽管在Linux下使用C或C+ ...
小白日记49：kali渗透测试之Web渗透-XSS（三）-存储型XSS、DOM型XSS、神器BEFF
存储型XSS与DOM型XSS [XSS原理] 存储型XSS 1.可长期存储于服务器端 2.每次用户访问都会被执行js脚本,攻击者只需侦听指定端口 #攻击利用方法大体等于反射型xss利用 ##多出现在留 ...
Pandas系列教程——写在前面
之前搜pandas资料,发现互联网上并没有成体系的pandas教程,于是乎突然有个爱迪页儿,打算自己把官网的文档加上自己用pandas的理解,写成一个系列的教程, 巩固自己,方便他人接下来就干这件事 ...
手动实现 KVO
来源:伯乐在线 - Jerry4me 链接:http://ios.jobbole.com/88828/ 点击 → 申请加入伯乐在线专栏作者我的Github地址 : https://github.co ...
10. Android框架和工具之 AppMsg（消息提示）
1. AppMsg 优雅的弹出类似Toast的消息提示,支持3种状态Alert(警告),Confirm(确认)以及Info(消息). 2. AppMsg使用: (1)AppMsg下载地址 ...
java正则表达式常用实例——借鉴思路
转载自:http://mp.weixin.qq.com/s?__biz=MjM5OTM4NDMyMg==&mid=2650044497&idx=1&sn=dc80fa35f7e ...
C++中模板函数或模板类中关键词class和typename
##区别基本上来说,class和typename几乎没有区别.在可以使用class的地方都可以使用typename,在使用typename的地方也几乎可以使用class. 可以看出我加黑了两个子:几 ...

JCrop+ajaxUpload 图像切割上传

JCrop+ajaxUpload 图像切割上传的更多相关文章

随机推荐

热门专题