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;

    }


}

来源：https://www.cnblogs.com/qfdy123/p/11397306.html

标签

string