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

随机推荐

IntelliJ IDEA实用插件
Free MyBatis plugin 插件效果 Save Actions 插件设置勾选后Ctrl + S就会执行格式化操作,等价于格式化快捷键Alt + Ctrl + L
centos6.8环境搭建
1.centos6 yum源失效解决方案下载使用阿里的云仓库 curl -o /etc/yum.repos.d/CentOS-Base.repo https://www.xmpan.com/Cent ...
thinkphp redis实现文章点赞功能并同步入mysql
<?php namespace app\common\controller; use think\App; use think\facade\Cache; use think\facade\Db ...
Python3爬取小说并保存到文件
问题 python课上,老师给同学们布置了一个问题,因为这节课上学的是正则表达式,所以要求利用python爬取小说网的任意小说并保存到文件. 我选的网站的URL是'https://www.biquka ...
用percona monitoring plugins 监控mysql
下载:http://www.percona.com/redir/downloads/percona-monitoring-plugins/1.1.1/percona-zabbix-templates- ...
linux系统中set、env、export关系
set 用来显示shell变量(包括环境变量.用户变量和函数名及其定义),同时可以设置shell选项来开启调试.变量扩展.路径扩展等开关env 用来显示和设置环境变量export 用来显示和设置导出到 ...
通过js给某个标签添加内容或者删除标签
添加内容 //先保存div中原来的html var tag = document.getElementById("tag").innerHTML; //构造新的内容 var cou ...
pytorch——预测值转换为概率，单层感知机
softmax函数,可以将算出来的预测值转换成0-1之间的概率形式导数的形式 import torch import torch.nn.functional as F x=torch.tensor( ...
处理 K8S Orphaned pod found - but volume paths are still present on disk 孤儿pod
问题概述查看kubelet或/var/log/messages日志一直包错,发现是孤儿pod,是由于其pod被删除后存储路径还保存在磁盘. 报错如下 [root@node5 ~]# journalc ...
并发编程之fork/join(分而治之)
1.什么是分而治之分而治之就是将一个大任务层层拆分成一个个的小任务,直到不可拆分,拆分依据定义的阈值划分任务规模. fork/join通过fork将大任务拆分成小任务,在将小任务的结果join汇总 ...

Jcrop图片裁剪

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

随机推荐

热门专题