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 ...

随机推荐

mysql 连接url中需要添加useUnicode=true&characterEncoding=UTF-8
下面是示例: 数据库中Username是张三在数据库配置时没有配置编码 useUnicode=true&characterEncoding=UTF-8 导致期望与实际不同配置useUni ...
PHP jquer网页打印插件 PrintArea
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta http-equiv=" ...
PHP 自定义 alert 跳转方法
/** * 跳转方法 * @param $msg * @param null $path * @param null $parent */ public function alert($msg,$pa ...
node解决跨域和服务器代理详解代码
node中有很多解决服务器代理的插件,这里简介一个:express-http-proxy 之前网上查的使用node解决跨域的插件,有很多,例如,cors,koa2,这里解决跨域问题我拿原生解决的,ex ...
使用OpenCV进行简单的人像分割与合成
图像合成实现思路通过背景建模的方法,对源图像中的动态人物前景进行分割,再将目标图像作为背景,进行合成操作,获得一个可用的合成影像. 实现步骤如下. 使用BackgroundSubtractorMO ...
Js中函数式编程的理解
函数式编程的理解函数式编程是一种编程范式,可以理解为是利用函数把运算过程封装起来,通过组合各种函数来计算结果.函数式编程与命令式编程最大的不同其实在于,函数式编程关心数据的映射,命令式编程关心解决问 ...
如何利用Intellij Idea搭建python编译运行环境 (转)
首先进入Intellij Idea的官方网站:点击打开链接点击download,选择旗舰版进行下载.网上的破解教程很多,也可以注册一个学生账号拿到一年的免费试用权. 安装过程不再细说,第一次打开选择 ...
【Oracle】translate函数用法解析
转自:https://blog.csdn.net/shwanglp/article/details/52814173 基本语法: translate(string,from_str,to_str); ...
MySQL全面瓦解18：自定义函数
定义我们之前学习了MySQL的内置函数,非常丰富,满足了我们对数据操作的大部分需求. 但是如果有一些复杂的业务逻辑在数据库层面就可以完成,无需在程序层面完成的时候,这时候就可以写成MySQL自定义函 ...
登陆到 SAP 系统后的用户出口
增强类型:smod 增强名称:SUSR0001 组件(退出功能模块):EXIT_SAPLSUSF_001 功能:用户每次登陆SAP系统后都会调用这个SUSR0001增强,可以在FUNCTION EXI ...

Jcrop图片裁剪

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

随机推荐

热门专题