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

随机推荐

风炫安全WEB安全学习第二十四节课利用XSS钓鱼攻击
风炫安全WEB安全学习第二十四节课利用XSS钓鱼攻击 XSS钓鱼攻击 HTTP Basic Authentication认证大家在登录网站的时候,大部分时候是通过一个表单提交登录信息. 但是有时候 ...
项目API接口鉴权流程总结
权益需求对接中,公司跟第三方公司合作,有时我们可能作为甲方,提供接口给对方,有时我们也作为乙方,调对方接口,这就需要API使用签名方法(Sign)对接口进行鉴权.每一次请求都需要在请求中包含签名信息, ...
2020周阳SpringCloud完整版笔记--一
微服务架构入门微服务的概念最早产生于Martin Fowler在2014年的一篇论文中. 微服务架构是一种架构模式,他提倡将单一应用程序划分成一组小的服务,服务与服务之间互相协调.相互配合,为用户 ...
mybatis入门教程之搭建一个简单的mybatis项目并启动它
一.准备条件: 1.依赖jar包:mybatis核心包(必须).lombok插件包(非必须)以及MySQL数据库连接驱动包(必须) <dependency> <groupId> ...
select 里面带的值居然是估算的？
mysql> set profiling=1;Query OK, 0 rows affected, 1 warning (0.07 sec) mysql> select count(1) ...
Arduino—学习笔记—基础语法
图解函数具体讲解 pinMode(工作接脚,模式) 工作接脚工作接脚编号(0--13与A0--A5) 模式工作模式:INPUT或OUTPUT 例子将8接口设置为输出模式 pinMode(8,O ...
手动验证MySQL Innodb RR级别加锁需要注意的几个点
记录几个坑优化器在表行数比较少的时候会使用全表扫描,会造成全表所有的行加锁,所以需要使用force index 强制使用索引来实现gap-lock(间隙锁)的应用 next-lock 加锁会锁 ...
浅谈JavaScript代码性能优化2
一.减少判断层级从下图代码中可以明显看出,同样的效果判断层级的减少可以优化性能二.减少作用域链查找层级简单解释下,下图中第一个运行foo函数,bar函数内打印name,bar作用域内没有name ...
gRPC-go源码（1）：连接管理
1 写在前面在这个系列的文章中,我们将会从源码的层面学习和理解gRPC. 整个系列的文章的计划大概是这样的:我们会先从客户端开始,沿着调用路径逐步分析到服务端,以模块为粒度进行学习,考虑这个模块是为 ...
本地Mac通过堡垒机代理实现跨堡垒机scp问题
近日,公司在跳板机前架设了堡垒机,以防止ssh攻击,但这带来一个问题,我们平常直接ssh跳板机,可以直接使用scp来上传或下载跳板机数据到本地架设堡垒之后经常使用的scp工具不好用了于是本期就来解 ...

Jcrop图片裁剪

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

随机推荐

热门专题