Java+Javascript图片裁剪简单封装

在做项目的过程中，有很多时候前端的图片会出现拉伸现象，所以在上传图片的时候，图片裁剪是必不可少的。所以有了封装一个图片裁剪工具的念头，下面是实现步骤:

1.首先选择一个前台裁剪工具，我这里使用的是Jcrop-0.9.12。

2.开始编写前端js代码:

我这里把前端封装成一个函数

/**
     * 初始化裁剪工具。
     * @param divId 定义生成填充页面代码的div（函数产生的代码会填充到此div内）
     * @param imagePath 图片地址
     * @param ratio 宽长比例
     * @param callback  裁剪之后的回调
     */

function initJcrop(divId,imagePath,ratio,callback)
               {
                   var postRatio=1;
                   var jcrop_api;
                   //外边框宽度和高度
                   var divWidth=800;
                   var divHeitht=divWidth/ratio;
                   //图片最大宽度和高度
                   var imageMaxWidth = divWidth*0.8;
                   var imageMaxHeight = divHeitht*0.8;
                   if($("#tempDiv").html()==null){
                         var tempDivHtml=‘<div id="tempDiv" style="position: fixed; border: 1px solid #ddd; left: 50%; top: 50%; width: ‘+divWidth+‘px;  margin-left: -400px; margin-top: -400px;  z-index: 3; background:#fff; border-radius: 10px; box-shadow: 0px 0px 20px 0px #000;  text-align: center;align:center">‘+
                                ‘<h1 style="text-align: center; font-size: 20px; padding-top: 20px;">图片裁剪</h1>‘+
                              ‘<div style="margin: 20px 50px; overflow: hidden; height:auto;">‘+
                              ‘<img id="jcropImg" src="‘+imagePath+‘">‘+
                              ‘<p>‘+
                              ‘<input type="button" id="saveButton" value="确定" style="width: 120px; height: 40px; margin: 10px 80px; background: #fff; border: 1px solid #ddd; font-size: 14px; outline: 0; cursor: pointer;">‘+
                              ‘<input type="button" id="closeButton" value="取消" style="width: 120px; height: 40px; margin: 10px 80px; background: #fff; border: 1px solid #ddd; font-size: 14px; outline: 0; cursor: pointer;" >‘+
                              ‘</p>‘+
                              ‘</div>‘+
                              ‘</div>‘;
                      $("#"+divId).html(tempDivHtml);
                  }
                $(‘#jcropImg‘).attr("src", imagePath);
                
                  $("#saveButton").on(‘click‘,function(){
                      var width=Math.abs(jcrop_api.tellSelect().x2-jcrop_api.tellSelect().x);
                      var height=Math.abs(jcrop_api.tellSelect().y2-jcrop_api.tellSelect().y);
                      $.ajax({  
                           type : "post",  
                            url : "imagecut",  
                            data : {"imagepath":imagePath,
                                   "ratio":postRatio,
                                   "width":width,
                                  "height":height,
                                  "x":jcrop_api.tellSelect().x,
                                  "y":jcrop_api.tellSelect().y,
                                 },  
                            async : false,  
                            success : function(data){  
                                     callback(imagePath);
                                      $("#tempDiv").remove();
                            }  
                       });
                });
                  $("#closeButton").on(‘click‘,function(){
                      $("#tempDiv").remove();
                });
                  document.getElementById("jcropImg").onload = function(){
                       var imageRatio = 0;
                       // 缩放比例
                       var imageWidth = $(‘#jcropImg‘).width();
                       // 图片实际宽度
                       var imageHeight = $(‘#jcropImg‘).height();
                       // 图片实际高度
                       // 检查图片是否超宽
                       if(imageWidth > imageMaxWidth) {
                           imageRatio = imageMaxWidth / imageWidth;
                           postRatio=postRatio*imageRatio;
                           imageWidth=imageMaxWidth;
                           imageHeight = imageHeight * imageRatio;
                           $(‘#jcropImg‘).css("width", imageWidth);
                           $(‘#jcropImg‘).css("height", imageHeight);
                       }
                       // 检查图片是否超高
                       if(imageHeight > imageMaxHeight) {
                           imageRatio = imageMaxHeight / imageHeight;
                           postRatio=postRatio*imageRatio;
                           imageHeight=imageMaxHeight;
                           imageWidth = imageWidth * imageRatio;
                           $(‘#jcropImg‘).css("width", imageWidth);
                           $(‘#jcropImg‘).css("height", imageHeight);
                       }
                         $(‘#jcropImg‘).Jcrop({
                           onRelease:releaseCheck,
                           aspectRatio:ratio,                //长宽比例
                           minSize: [50,50],            //最小长宽
                         },function(){
                           jcrop_api = this;
                           jcrop_api.animateTo([0,0,50,50*ratio]);//初始化位置，大小
                         });
                  }
               };
               function releaseCheck()
               {
                 jcrop_api.setOptions({allowSelect:true});
               };

3.action层声明（我这里使用的是springMVC框架，所以使用注解方式声明）：

@RequestMapping(value="/imagecut")
    @ResponseBody
    public void imagecut(String imagepath,double ratio,double width,double height,double x,double y){
        try {
            imagepath=request.getSession().getServletContext().getRealPath("/images/"+imagepath.split("/")[3]+"/"+imagepath.split("/")[4]);;
            Common.imageCut(imagepath, (int)(x/ratio), (int)(y/ratio), (int)(width/ratio), (int)(height/ratio));
        } catch (IOException e) {
            e.printStackTrace();
        }
    }

4.业务层编写（这里写的是替换原图，如果需求是另存为可以修改部分代码）

/**
     * 对图片裁剪，并把裁剪新图片保存 。
     * @param imagePath 图片路径
     * @param x 左上角x坐标
     * @param y 左上角y坐标
     * @param width 截取宽度
     * @param height 截取高度
     */  
    public static void imageCut(String imagePath,int x,int y,int width,int height) throws IOException {  
        FileInputStream is = null;  
        ImageInputStream iis = null;  
        try {  
            // 读取图片文件  
            is = new FileInputStream(imagePath);  
            /**
             * 返回包含所有当前已注册 ImageReader 的 Iterator，这些 ImageReader
             * 声称能够解码指定格式。 参数：formatName - 包含非正式格式名称 .
             * (例如 "jpeg" 或 "tiff")等 。
             */  
            Iterator<ImageReader> it = ImageIO.getImageReadersByFormatName("jpg");  
            ImageReader reader = it.next();  
            // 获取图片流  
            iis = ImageIO.createImageInputStream(is);  
            /**
             * <p>
             * iis:读取源。true:只向前搜索
             * </p>
             * .将它标记为 ‘只向前搜索’。
             * 此设置意味着包含在输入源中的图像将只按顺序读取，可能允许 reader
             * 避免缓存包含与以前已经读取的图像关联的数据的那些输入部分。
             */  
            reader.setInput(iis, true);  
            /**
             * <p>
             * 描述如何对流进行解码的类
             * <p>
             * .用于指定如何在输入时从 Java Image I/O
             * 框架的上下文中的流转换一幅图像或一组图像。用于特定图像格式的插件
             * 将从其 ImageReader 实现的 getDefaultReadParam 方法中返回
             * ImageReadParam 的实例。
             */  
            ImageReadParam param = reader.getDefaultReadParam();  
            /**
             * 图片裁剪区域。Rectangle 指定了坐标空间中的一个区域，通过 Rectangle 对象
             * 的左上顶点的坐标(x，y)、宽度和高度可以定义这个区域。
             */  
            Rectangle rect = new Rectangle(x,y,width,height);  
            // 提供一个 BufferedImage，将其用作解码像素数据的目标。  
            param.setSourceRegion(rect);  
            /**
             * 使用所提供的 ImageReadParam 读取通过索引 imageIndex 指定的对象，并将
             * 它作为一个完整的 BufferedImage 返回。
             */  
            BufferedImage bi = reader.read(0, param);  
            // 保存新图片  
            ImageIO.write(bi, "jpg", new File(imagePath));  
        } finally {  
            if (is != null)  
                is.close();  
            if (iis != null)  
                iis.close();  
        }  
    }

5.最后更新图片等操作，就可以在回调函数里自己编写

没有做过多测试，如果哪里有问题，可以联系我！

时间： 2024-11-03 01:39:53

Java+Javascript图片裁剪简单封装的相关文章

Java实现图片裁剪预览功能

Java实现图片裁剪预览功能 在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码: package org.csg.upload; import java.awt.Rectangle; import java.awt.image.BufferedImage; import java.io.File; import java.io.FileInputStream; import java.io.IOException; import 

JavaScript图片裁剪

1.jquery 图片裁剪库选择 Jcrop:http://deepliquid.com/content/Jcrop.html imgareaselect:http://odyniec.net/projects/imgareaselect/ CropZoom:https://github.com/cropzoom/cropzoom 可供选择的jQuery插件非常多,这里选择 imgareaselect 进行详细演示 2.综合演示效果 2.1 左侧区域是 div + img 标签,用来展示原图,具

原生 JavaScript 图片裁剪效果

图片裁剪程序效果如下,可鼠标操作. 拖动左边小方框时在右侧实时显示对应的裁剪图片,同时左侧的拖动框里图片完全显示,拖动框外部图片模糊显示.8个控制点可以对显示区域大小进行控制. HTML 和 CSS 部分 左侧的裁剪操作区域可以分为三层. 最底层的图片半透明效果:中间层的图片只显示制定区域,其他部分隐藏:最上层为拖拽控制层.最低层和中间层使用同一张图片,利用CSS属性clip控制中间层只显示一部分. 三个层都使用 absolute 绝对定位.下面是 HTML 和 CSS 代码. 1 <div i

使用canvas进行图片裁剪简单功能

1.html部分 使用一个input[type="file"]进行图片上传: canvas进行图片的裁剪展示 <div> <input type="file" id="imgFile"> </div> <div id="demoBox" style="width: 300px;height: 300px;position: absolute;left: 300px;top:

JAVA实现图片裁剪

1 /** 2 * 裁剪图片 3 * @param src 源图片 4 * @param dest 裁剪后的图片 5 * @param x 裁剪范围的X坐标 6 * @param y 裁剪范围的Y坐标 7 * @param w 裁剪范围的高度 8 * @param h 裁剪范围的宽度 9 * @param destW 裁剪后图片的宽度 10 * @param destH 裁剪后图片的高度 11 * @throws IOException 12 */ 13 public static void c

实现java连接mongoDB（简单封装）

最近要完成一个登陆注册的功能,加上刚刚学了MongoDB,就想试一试,查了很多博客,都不能找到一篇完整的用例,只有自己折腾下了.这里我们需要加载一个jar包,我用的是mongo-java-driver-3.8.0.jar,主要用到的是client下的相关组件. package com.amyyang.mongodb; import com.mongodb.MongoClient; import com.mongodb.client.FindIterable; import com.mongodb

简单二次封装的Golang图像处理库:图片裁剪

简单二次封装的Golang图像处理库:图片裁剪 一．功能 Go语言下的官方图像处理库 简单封装后对jpg和png图像进行缩放/裁剪的库 二．使用说明 1.首先下载 go get -v -u github.com/hunterhug/go_image 2.主要函数 按照宽度进行等比例缩放,第一参数是图像文件,第二个参数是缩放后的保存文件路径 err := ScaleF2F(filename, savepath, width) 按照宽度和高度进行等比例缩放,第一参数是图像文件,第二个参数是缩放后的保

简单的图片裁剪服务器

自己写的一个简单的图片服务器,可以读取FastDFS上的图片,根据参数进行图片裁剪输出到前台 改项目可以上传图片到FastDFS,读取FastDFS上存储的图片,前面可以增加Varnish图片缓存服务器缓解图片裁剪压力 使用一个简单的Servlet实现 package com.imgcut.servlet; import java.io.IOException; import java.io.InputStream; import javax.servlet.ServletException;

java 图片裁剪

图片裁剪功能,我一直以为是前端那边去做,后台不用做过多的考虑,现在我发现,前端去做裁剪好像不是太理想,我在这里简单地介绍一下我们大java的裁剪功能 前端只需要上传,x (x轴),y(y轴) , h(高), w(宽),以上几个坐标点即可 以下是原图 裁剪之后 代码如下,需要引入jar public static void main(String[] args) { // 在 C 盘的根目录有一张 1.jpg 的图片 File fromPic = new File("C:\\1.jpg"