Jcrop图片裁剪

Posted qfdy123

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了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配合后台Graphics实现图片裁剪并上传

jQuery 图片裁剪插件 Jcrop

图片裁剪上传Jcrop

支持移动端裁剪图片插件Jcrop(结合WebUploader上传)

Jcrop图片裁剪