Jcrop图片裁剪

一、引入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图片裁剪的更多相关文章

上传、裁剪图片-----Jcrop图片裁剪插件
Jcrop文档:http://code.ciaoca.com/jquery/jcrop/C#裁剪:http://www.cnblogs.com/xyang/archive/2013/02/25/293 ...
struts2+jsp+jquery+Jcrop实现图片裁剪并上传
<1> 使用html标签上传需要裁剪的大图. <2> 在页面呈现大图,使用Jcrop(Jquery)对大图进行裁剪,并且可以进行预览. <3> 选择好截取部分之后发 ...
使用JCrop进行图片裁剪，裁剪js说明，裁剪预览，裁剪上传，裁剪设计的图片处理的工具类和代码
1.要想制作图片裁剪功能,可以使用网上的裁剪工具JCrop,网址是:https://github.com/tapmodo/Jcrop/ 案例效果如下: 2.引入JCrop的js代码,具体要引入那 ...
jQuery 图片裁剪插件 Jcrop
Jcrop是一个jQuery图片裁剪插件,它能为你的WEB应用程序快速简单地提供图片裁剪的功能.特点如下: 对所有图片均unobtrusively(无侵入的,保持DOM简洁) 支持宽高比例锁定支持 ...
bootstrap-wysiwyg 结合 base64 解码 .net bbs 图片操作类（二）图片裁剪
图片裁剪参见: http://deepliquid.com/projects/Jcrop/demos.php?demo=thumbnail 一个js插件 http://www.mikes ...
jQuery Jcrop 图像裁剪
jQuery Jcrop 图像裁剪 http://code.ciaoca.com/jquery/jcrop/ cropper.js 实现HTML5 裁剪图片并上传(裁剪上传头像.) https://b ...
java图片裁剪和java生成缩略图
一.缩略图在浏览相冊的时候.可能须要生成相应的缩略图. 直接上代码: public class ImageUtil { private Logger log = LoggerFactory.getL ...
Java实现图片裁剪预览功能
在项目中.我们须要做些类似头像上传,图片裁剪的功能,ok看以下文章! 须要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.R ...
JavaScript图片裁剪
1.jquery 图片裁剪库选择 Jcrop:http://deepliquid.com/content/Jcrop.html imgareaselect:http://odyniec.net/pro ...

随机推荐

初识sa-token，一行代码搞定登录授权！
前言在java的世界里,有很多优秀的权限认证框架,如Apache Shiro.Spring Security 等等.这些框架背景强大,历史悠久,其生态也比较齐全. 但同时这些框架也并非十分完美,在前 ...
CentOS6.8安装及各种坑
实现目的:用U盘安装CentOS 6.2 32位系统所需工具: 一.UltraISO(用来制作U盘启动) 下载地址:http://www.newhua.com/soft/614.htm 二.Cent ...
Java反射全解析（使用、原理、问题、在Android中的应用）
前言今天说Java模块内容:反射. 反射介绍正常情况下,我们知晓我们要操作的类和对象是什么,可以直接操作这些对象中的变量和方法,比如一个User类: User user=new User(); u ...
LeetCode559.N 叉树的最大深度
题目法一.层序遍历 1 class Solution { 2 public: 3 int maxDepth(Node* root) { 4 if(root== NULL) return 0; 5 q ...
bat批处理积累
1 ::所有命令不回显,包含echo off自身也不回显 2 @echo off 3 4 ::rem或双冒号都为注释行 5 6 rem 变量赋值,注意变量和等号之间不能有空格,等号后的空格会作为变量值 ...
undefined和null区别
undefined类型只有一个值就是undefined,没有必要显式地声明一个变量为undefined. null类型其实就是一个对象的空指针,所以用typeof null 才会显示为object. ...
利用vbs隐藏dos窗口
方法一: option explicitdim wshshellset wshshell=wscript.createobject("wscript.shell")wshshell ...
使用gui_upload的总结
今天使用gui_upload函数将文本文件的内容读取到内表.出现了一个问题,总是程序宕掉,出项的提示是 Type conflict when calling a function module. 原来 ...
Java中的基本数据类型与引用数据类型
一.基本数据类型 byte.short.int.long(整数类型) float.double(浮点数类型) char(字符型) boolean(布尔类型 ) Java数据大多数存放在堆栈中. 栈区: ...
[从源码学设计]蚂蚁金服SOFARegistry之延迟操作
[从源码学设计]蚂蚁金服SOFARegistry之延迟操作 0x00 摘要 SOFARegistry 是蚂蚁金服开源的一个生产级.高时效.高可用的服务注册中心. 本系列文章重点在于分析设计和架构,即利 ...

Jcrop图片裁剪

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

随机推荐

热门专题