一、引入js和css

二、实现

1、jsp页面

<%--

  Created by IntelliJ IDEA.

  User: a

  Date: 2019/8/19

  Time: 9:36

  To change this template use File | Settings | File Templates.

--%>

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>

<head>

    <title>Title</title>

    <link rel="stylesheet" type="text/css" href="js/jquery.Jcrop.min.css">

    <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>

    <script type="text/javascript" src="js/Jcrop_upload.js"></script>

    <script type="text/javascript" src="js/jquery.Jcrop.min.js"></script>

</head>

<body>

<form id="upload_form" enctype="multipart/form-data" method="post" action="${pageContext.request.contextPath}/user/upLoadImage.do" >

    <!-- hidden crop params -->

    <input type="hidden" id="x1" name="x1" />

    <input type="hidden" id="y1" name="y1" />

    <input type="hidden" id="x2" name="x2" />

    <input type="hidden" id="y2" name="y2" />

    <p>第一步：请选择图像文件</p>

    <div><input type="file" name="image_file" id="image_file" onchange="fileSelectHandler()" /></div>

    <div class="error"></div>

    <div class="step2">

        <p>第二步：请选择需要截图的部位,然后按上传</p>

        <img id="preview" >

        <br>

        <input type="submit" value="上传" />

    </div>

</form>

</body>

</html>

2、工具类

package com.zy.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.File;

import java.io.IOException;

import javax.imageio.ImageIO;

public class ImageCut {  

    /**

     * 图片切割

     * @param imagePath  原图地址

     * @param x  目标切片坐标 X轴起点

     * @param y  目标切片坐标 Y轴起点

     * @param w  目标切片 宽度

     * @param h  目标切片 高度

     */

    public static  void cutImage(String imagePath, int x ,int y ,int w,int h){

        try {

            Image img;

            ImageFilter cropFilter;

            // 读取源图像

            BufferedImage bi = ImageIO.read(new File(imagePath));

            int srcWidth = bi.getWidth();      // 源图宽度

            int srcHeight = bi.getHeight();    // 源图高度  

            //若原图大小大于切片大小，则进行切割

            if (srcWidth >= w && srcHeight >= h) {

                Image image = bi.getScaledInstance(srcWidth, srcHeight,Image.SCALE_DEFAULT);  

                //如果jsp页面上展示的是原图的大小，那么此处就不计算起始坐标和宽高了，直接裁剪

                int x1 = x;

                int y1 = y;

                int w1 = w;

                int h1 = h;  

                cropFilter = new CropImageFilter(x1, y1, w1, h1);

                img = Toolkit.getDefaultToolkit().createImage(new FilteredImageSource(image.getSource(), cropFilter));

                BufferedImage tag = new BufferedImage(w1, h1,BufferedImage.TYPE_INT_RGB);

                Graphics g = tag.getGraphics();

                g.drawImage(img, 0, 0, null); // 绘制缩小后的图

                g.dispose();

                // 输出为文件

                ImageIO.write(tag, "JPEG", new File(imagePath));

            }

        } catch (IOException e) {

            e.printStackTrace();

        }

    }

}

3、controller

package com.zy.controller;

import com.zy.utils.ImageCut;

import org.apache.commons.io.IOUtils;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.multipart.MultipartFile;

import org.springframework.web.servlet.ModelAndView;

import javax.servlet.http.HttpServletRequest;

import java.io.*;

import java.util.UUID;

@Controller

@RequestMapping("user")

public class ImageController {

    @RequestMapping("/upLoadImage")

    public void upimage(Double x1,Double x2,Double y1,Double y2,HttpServletRequest request,MultipartFile image_file ){//包装类

        Boolean isCut=false;//不裁剪

        if (x2!=null&&x2!=0){//如果x2有值，说明横坐标终点发生变化，用户使用了裁剪

            //截取的宽度

            isCut=true;

        }

        //图片上传

        String path="/img";

        String realPath = myGetRealPath(path, request);

        String newFileName = newFileName(image_file);

        //上传----把本地文件按流的方式copy到服务器上

        //输入流

        InputStream is = null;

        try {

            is = image_file.getInputStream();

        } catch (IOException e) {

            e.printStackTrace();

        }

        //输出流

        FileOutputStream os = null;

        try {

            os = new FileOutputStream(realPath+"/"+newFileName);

        } catch (FileNotFoundException e) {

            e.printStackTrace();

        }

        //copy

        try {

            IOUtils.copy(is, os);

        } catch (IOException e) {

            e.printStackTrace();

        }

        try {

            os.close();

            is.close();

        } catch (IOException e) {

            e.printStackTrace();

        }

        int i1=x1.intValue();

        int i2=x2.intValue();

        int i3=y1.intValue();

        int i4=y2.intValue();

        //3图片裁剪

        if(isCut){

            ImageCut.cutImage(realPath+"/"+newFileName,i1,i3,i2-i1,i4-i3);

        }

    }

    //辅助方法

    //1根据逻辑路径得到真实路径

    //过期的

    //@SuppressWarnings(“deprecation”)表示不检测过期的方法

    @SuppressWarnings("deprecation")

    public String myGetRealPath(String path, HttpServletRequest request){

        String realPath = request.getRealPath(path);

        System.out.println("真实路径："+realPath);

        File file = new File(realPath);

        if(!file.exists()){

            file.mkdirs();

        }

        return realPath;

    }

    //2更改文件名

    public String newFileName(MultipartFile file){

        String originalFilename = file.getOriginalFilename();

        //abc.jpg

        //截取后缀，拼接新的文件名

        //后缀

        String substring = originalFilename.substring(originalFilename.lastIndexOf("."));

        //新文件名要求：上传中防止文件名重复，发生覆盖

        String uu = UUID.randomUUID().toString();

        String newName=uu+substring;

        return newName;

    }

}

Jcrop图片裁剪的更多相关文章

  1. 上传、裁剪图片-----Jcrop图片裁剪插件

    Jcrop文档:http://code.ciaoca.com/jquery/jcrop/C#裁剪:http://www.cnblogs.com/xyang/archive/2013/02/25/293 ...

  2. struts2+jsp+jquery+Jcrop实现图片裁剪并上传

    <1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...

  3. 使用JCrop进行图片裁剪，裁剪js说明，裁剪预览，裁剪上传，裁剪设计的图片处理的工具类和代码

     1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...

  4. jQuery 图片裁剪插件 Jcrop

    Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定 支持 ...

  5. bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类 （二） 图片裁剪

    图片裁剪参见: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail        一个js插件 http://www.mikes ...

  6. jQuery Jcrop 图像裁剪

    jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...

  7. java图片裁剪和java生成缩略图

    一.缩略图 在浏览相冊的时候.可能须要生成相应的缩略图. 直接上代码: public class ImageUtil { private Logger log = LoggerFactory.getL ...

  8. Java实现图片裁剪预览功能

    在项目中.我们须要做些类似头像上传,图片裁剪的功能,ok看以下文章! 须要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.R ...

  9. JavaScript图片裁剪

    1.jquery 图片裁剪库选择 Jcrop:http://deepliquid.com/content/Jcrop.html imgareaselect:http://odyniec.net/pro ...

随机推荐

  1. 20210105 - python自动化办公简介

    新的一年开始了, 计划每周至少更新三篇博客. 人生苦短,如果不做改变,人生很快会过去!2021年寻求改变,加油! python自动化办公: 1.相关工具与环境的安装概要: 需要用到python(一种开 ...

  2. Mirai qq机器人 c++版sdk（即用c++写mirai）

    Mirai机器人c++版 前言 类似教程 本文git,gitee地址 c++开发mirai 原理 大概流程 实现 如何使用 注意事项 常见错误 前言 改分支版本以及过时,暂时不再维护 请看最新版kot ...

  3. 【函数分享】每日PHP函数分享(2021-1-11)

    str_shuffle() 随机打乱一个字符串. string str_shuffle ( string $str ) 参数描述 str     输入字符串.返回值:返回打乱后的字符串.实例: < ...

  4. 【Azure Redis 缓存】Azure Redis功能性讨论

    关于使用Azure Redis服务在以下九大方面的功能性的解说: 高可用 备份可靠性 配置自动化 部署多样性 快速回档功能 数据扩容 SLA稳定性 数据安全性 监控系统 一:高可用 Azure Cac ...

  5. 【JavaWeb】Servlet 程序

    Servlet 程序 Servlet Servlet 是在 Web 服务器中运行的小型 Java 程序.Servlet 通常通过 HTTP(超文本传输​​协议)接收和响应来自 Web 客户端的请求. ...

  6. 【C++】《C++ Primer 》第二章

    第二章 变量和基本类型 指针和引用的不同点 引用不是一个对象,它没有实际地址,但是指针是一个对象.允许对指针赋值和拷贝,而且在指针的生命周期内它可以先后指向几个不同的对象. 指针无须在定义时赋初值.

  7. paramunittest参数化测试基础

    samples: import paramunittestimport unittest@paramunittest.parametrized( (10,20), (30,40), # (100,20 ...

  8. 【Oracle】查询锁的相关SQL

    --查看有锁的进程 select t2.username,t2.sid,t2.serial#,t2.logon_time,t2.state from v$locked_object t1,v$sess ...

  9. ORA-00054: 資源正被使用中, 請設定 NOWAIT 來取得它, 否則逾時到期

    1.查看被使用资源的OBJECT_ID SELECT *FROM DBA_OBJECTS WHERE OBJECT_NAME='OBJECT_NAME' 2.查看资源被谁占用SELECT * FROM ...

  10. fsutil比较有用的几个命令

    Fsutil:fsinfo 主要由专业支持者使用.列出所有驱动器,查询驱动器类型,查询卷信息,查询特定的 卷信息或文件系统统计信息. 语法参数 drives 列出计算机中所有的驱动器. drivety ...