`
king520
  • 浏览: 177102 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
文章分类
社区版块
存档分类
最新评论

使用jquery jcrop插件进行图片的截取与保存

 
阅读更多

第一步:上传大图片到服务器,并且展示到页面
第二部:调用jcrop组件js及css

<script src="${ctx}/js/jquery-jcrop/jquery.Jcrop.js"></script>	
<link rel="stylesheet" href="${ctx}/css/jquery-jcrop/jquery.Jcrop.css" type="text/css" />	

第三部:采用插件
进行图片的选取,其中主要包括x,y,width,height


$('#cropButton').click(function(){
		    var x = $("#x").val();
			var y = $("#y").val();
			var w = $("#w").val();
			var h = $("#h").val();	
			if(w == 0 || h == 0 ){
				alert("您还没有选择图片的剪切区域,不能进行剪切图片!");
				return;
			}	
			//alert("你要剪切图片的X坐标: "+x + ",Y坐标: " + y + ",剪切图片的宽度: " + w + ",高度:" + h );
			if(confirm("确定按照当前大小剪切图片吗")){				
				//document.form1.submit();
			    //$("#makeHeadImgDiv").toggle();
			    function loadHeadUrl(data){
			    	//alert(data.headUrl);
			    	 alert(data.retMsg);
			    	 $("#img_headUrl").attr("src",data.headUrl);
			    	 $("#headUrl").val(data.headUrl);
			    	//alert($("#headUrl").val());
			    }
				var url="${ctx}/admin/pri/guest/guest_cutHeadImg.action";
				var options ={ 
						//beforeSubmit: validate,
				        url:	   url,
				        success:   loadHeadUrl, 
				        type:      'post',      
				        dataType:  'json'
				};
				$('#cutHeadImgFrm').ajaxSubmit(options);
			}
	 });


然后调用后台方法切割图片。
设计的包:
import java.awt.*;
import java.awt.image.*;
import java.awt.Graphics;
import java.awt.color.ColorSpace;
import javax.imageio.ImageIO;
第四部:保存新文件路径,展示图片到页面。


方法类:

package com.wondertek.meeting.util;

import java.io.*;
import java.awt.*;
import java.awt.image.*;
import java.awt.Graphics;
import java.awt.color.ColorSpace;
import javax.imageio.ImageIO;

public class ImageCut {
	
	/** 
     * 图像切割(改)     * 
     * @param srcImageFile            源图像地址
     * @param dirImageFile            新图像地址
     * @param x                       目标切片起点x坐标
     * @param y                      目标切片起点y坐标
     * @param destWidth              目标切片宽度
     * @param destHeight             目标切片高度
     */
    public static void abscut(String srcImageFile,String dirImageFile, int x, int y, int destWidth,
            int destHeight) {
        try {
            Image img;
            ImageFilter cropFilter;
            // 读取源图像
            BufferedImage bi = ImageIO.read(new File(srcImageFile));
            int srcWidth = bi.getWidth(); // 源图宽度
            int srcHeight = bi.getHeight(); // 源图高度          
            if (srcWidth >= destWidth && srcHeight >= destHeight) {
                Image image = bi.getScaledInstance(srcWidth, srcHeight,
                        Image.SCALE_DEFAULT);
                // 改进的想法:是否可用多线程加快切割速度
                // 四个参数分别为图像起点坐标和宽高
                // 即: CropImageFilter(int x,int y,int width,int height)
                cropFilter = new CropImageFilter(x, y, destWidth, destHeight);
                img = Toolkit.getDefaultToolkit().createImage(
                        new FilteredImageSource(image.getSource(), cropFilter));
                BufferedImage tag = new BufferedImage(destWidth, destHeight,
                        BufferedImage.TYPE_INT_RGB);
                Graphics g = tag.getGraphics();
                g.drawImage(img, 0, 0, null); // 绘制缩小后的图
                g.dispose();
                // 输出为文件
                ImageIO.write(tag, "JPEG", new File(dirImageFile));
            }
        } catch (Exception e) {
            e.printStackTrace();
        }
    }

    
	/**
	 * 缩放图像
	 * 
	 * @param srcImageFile       源图像文件地址
	 * @param result             缩放后的图像地址
	 * @param scale              缩放比例
	 * @param flag               缩放选择:true 放大; false 缩小;
	 */
	public static void scale(String srcImageFile, String result, int scale,
			boolean flag) {
		try {
			BufferedImage src = ImageIO.read(new File(srcImageFile)); // 读入文件
			int width = src.getWidth(); // 得到源图宽
			int height = src.getHeight(); // 得到源图长
			if (flag) {
				// 放大
				width = width * scale;
				height = height * scale;
			} else {
				// 缩小
				width = width / scale;
				height = height / scale;
			}
			Image image = src.getScaledInstance(width, height,Image.SCALE_DEFAULT);
			BufferedImage tag = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
			Graphics g = tag.getGraphics();
			g.drawImage(image, 0, 0, null); // 绘制缩小后的图
			g.dispose();
			ImageIO.write(tag, "JPEG", new File(result));// 输出到文件流
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	/**
	 * 重新生成按指定宽度和高度的图像
	 * @param srcImageFile       源图像文件地址
	 * @param result             新的图像地址
	 * @param _width             设置新的图像宽度
	 * @param _height            设置新的图像高度
	 */
	public static void scale(String srcImageFile, String result, int _width,int _height) {		
		scale(srcImageFile,result,_width,_height,0,0);
	}
	
	public static void scale(String srcImageFile, String result, int _width,int _height,int x,int y) {
		try {
			
			BufferedImage src = ImageIO.read(new File(srcImageFile)); // 读入文件
			
			int width = src.getWidth(); // 得到源图宽
			int height = src.getHeight(); // 得到源图长
			
			if (width > _width) {
				 width = _width;
			}
			if (height > _height) {
				height = _height;
			}			
			Image image = src.getScaledInstance(width, height,Image.SCALE_DEFAULT);
			BufferedImage tag = new BufferedImage(width, height,BufferedImage.TYPE_INT_RGB);
			Graphics g = tag.getGraphics();
			g.drawImage(image, x, y, null); // 绘制缩小后的图
			g.dispose();			
			ImageIO.write(tag, "JPEG", new File(result));// 输出到文件流
		} catch (IOException e) {
			e.printStackTrace();
		}
	}
	
	/**
	 * 图像类型转换 GIF->JPG GIF->PNG PNG->JPG PNG->GIF(X)
	 */
	public static void convert(String source, String result) {
		try {
			File f = new File(source);
			f.canRead();
			f.canWrite();
			BufferedImage src = ImageIO.read(f);
			ImageIO.write(src, "JPG", new File(result));
		} catch (Exception e) {
			e.printStackTrace();
		}
	}

	/**
	 * 彩色转为黑白
	 * 
	 * @param source
	 * @param result
	 */
	public static void gray(String source, String result) {
		try {
			BufferedImage src = ImageIO.read(new File(source));
			ColorSpace cs = ColorSpace.getInstance(ColorSpace.CS_GRAY);
			ColorConvertOp op = new ColorConvertOp(cs, null);
			src = op.filter(src, null);
			ImageIO.write(src, "JPEG", new File(result));
		} catch (IOException e) {
			e.printStackTrace();
		}
	}

	/**
	 * @param args
	 */
	public static void main(String[] args) {
		//晕。。。搞成多个了...
		//cut("c:/images/ipomoea.jpg", "c:/images/t/ipomoea.jpg", 200, 150);
		//ok
		//gray("c:/images/ipomoea.jpg", "c:/images/t/ipomoea.jpg");
		//convert("c:/images/ipomoea.jpg", "c:/images/t/ipomoea.gif");
		//scale("c:/images/5105049910001020110718648723.jpg", "c:/images/t/5105049910001020110718648725.jpg",154,166,157,208);
		//scale("c:/images/rose1.jpg", "c:/images/t/rose1.jpg",154,166,157,208);
		scale("c:/images/rose1.jpg", "c:/images/t/rose2.jpg",154,166,10,10);
		
	}
}


分享到:
评论

相关推荐

    jQuery插件-Jcrop 对图片的截取 显示操作

    这个插件允许用户在浏览器端对图片进行选择和裁剪,提供了丰富的API和灵活的配置选项,适用于各种图片处理需求。 1. **Jcrop基本概念** Jcrop的核心功能是提供一个可交互的选区,用户可以通过鼠标或触控设备在图片...

    jquery头像截取jcrop

    `jQuery jCrop` 就是一个这样的工具,它允许用户在上传图片前进行自由裁剪,确保上传的头像符合特定的尺寸要求。 ### 一、jCrop简介 `jCrop` 是一个基于jQuery的图像裁剪插件,它可以与HTML5的`...

    jsp+jquery(jcrop)实现的图片预览剪切上传

    `jQuery`监听文件输入元素的改变事件,当用户选择图片后,`jCrop`会自动对图片进行预加载并显示在页面上。用户可以通过鼠标操作在图片上划定需要剪切的部分,这个过程可以在上传前实时预览。一旦用户满意,点击上传...

    基于jquery的图片截取工具

    1. **选择合适的插件**:有许多开源的jQuery插件可以实现图片截取功能,例如cropper.js、Jcrop等。这些插件已经封装好了复杂的图像处理逻辑,开发者只需要引入相应的JS和CSS文件,然后按照文档配置即可。 2. **HTML...

    Jcrop官方的图片裁剪jQuery插件

    Jcrop是一款基于jQuery的开源图片裁剪插件,它为Web开发者提供了在浏览器端实现图片裁剪功能的强大工具。这款插件广泛应用于各种需要用户自定义选择图片区域的场景,如上传头像、图片预览和编辑等。下面将详细介绍...

    jQuery jcrop插件截图使用方法

    jQuery jcrop插件是一个基于jQuery开发的JavaScript图像裁剪插件,它能够提供一个简单易用的用户界面来实现图像的自由裁剪。该插件在前端页面中可以快速搭建起一个图像的裁剪区域,并且允许用户拖动和缩放来选择裁剪...

    使用JCrop 截取头像包含了后台处理代码 asp net c#

    2.使用了JCrop插件 3.可以选择背景色 4.控制选择框为1:1的比例 5.设置了选择框的最大范围和最小范围 6.可以支持键盘上下左右箭头移动 7.可以切换图片上传到服务器后截取图片并返回客户端 8.图片上传是无刷新上传的"&gt;...

    JQUERY上传图片截取

    综上所述,实现"JQUERY上传图片截取"功能需要结合jQuery进行前端交互,利用图片裁剪插件实现截取,后端使用PHP配合图像处理库处理截取和保存。在整个过程中,需要注意安全性、性能优化以及良好的用户交互设计。

    jcrop 截图 jquery

    标题“jcrop 截图 jquery”和描述中提到的技术主要涉及到前端图像处理,特别是使用jQuery库和jCrop插件实现网页上的图片截取功能。jCrop是一款基于jQuery的图片裁剪工具,它允许用户通过交互式界面选择图片的特定...

    js插件Jcrop自定义截取图片功能

    3. Jcrop插件的集成与使用: - 首先需要在HTML页面中引入jQuery和Jcrop的脚本文件。 - 创建一个用于显示图片的容器,并在该容器上初始化Jcrop插件。 - 通过回调函数,如onSelect、onChange等,可以获取剪裁区域的...

    好用的jquery图片截取

    标题中的“好用的jquery图片截取”表明我们要讨论的是如何使用jQuery库来实现图片的裁剪功能。jQuery是一款广泛使用的JavaScript库,它简化了HTML文档遍历、事件处理、动画以及Ajax交互。在这个场景中,我们将关注...

    php整合Jcrop截取的上传头像功能

    本示例结合了Jcrop插件,提供了一种便捷的解决方案。Jcrop是一款强大的JavaScript图像裁剪工具,它允许用户在前端对上传的图片进行自由裁剪,然后将裁剪的坐标信息发送到后端,由PHP处理并保存。 首先,我们需要...

    Jcrop&JQ鼠标放上图片放大效果

    在IT领域,尤其是在网页开发中,常常需要处理与图像交互相关的功能,比如截取图片的特定部分或实现图片预览时的放大效果。本篇将详细介绍`Jcrop`和jQuery(JQ)如何协同工作来实现这些功能。 `Jcrop`是一个基于...

    图片的截取上传java+Jcrop

    本教程将详细介绍如何结合Java和Jcrop插件实现这一功能。Jcrop是一款强大的JavaScript图像裁剪工具,它允许用户在前端选择并裁剪图像,然后将裁剪参数发送到后端,由后端程序进行实际的图片处理。 首先,我们需要...

    四个图片截取案例源码.net和jquery

    2. **jQuery插件**:例如`cropper.js`或`jCrop`,它们提供了直观的用户界面和API,允许用户通过鼠标选择要截取的图像区域。这些插件通常包含拖动、缩放和旋转功能,以及预览和保存裁剪结果的能力。 3. **ASP.NET...

    jQuery mobile图片截图

    6. **JCrop**:这是一个基于 jQuery 的图像裁剪插件,它允许用户通过鼠标或触摸操作选取图片的任意部分进行裁剪。Jcrop 提供了丰富的配置选项和事件处理,可以轻松集成到 jQuery Mobile 应用中。 7. **事件处理**:...

    Jcrop头像截取

    开发者需要编写接口,接收前端发送的裁剪参数,然后根据这些参数对上传的原始图片进行裁剪。 在项目中,`imageDispose`可能是指与图像处理相关的资源文件,如CSS样式表、JavaScript脚本、示例图片或者服务器端处理...

    JQ头像截取插件

    "JQ头像截取插件"就是专门针对这一需求而设计的一个工具,它允许用户在上传图片时进行区域选择,确保他们能精确地截取自己想要展示的部分作为头像。下面我们将详细讨论这个插件以及其相关的技术知识点。 首先,"JQ...

    jcrop v0.9.12

    通过接收Jcrop传来的坐标,计算出需要截取的图像部分,并保存为新的图片文件。而在Java环境中,如使用JavaFX或Java图像处理库如ImgLib2,同样能实现类似的功能。 总的来说,Jcrop v0.9.12凭借其丰富的功能和易用性...

    Jcrop-master

    2. **产品图片编辑**:在线电商网站中,用户可以使用Jcrop裁剪产品图片,以适应不同的展示位置和尺寸。 3. **图片分享**:社交媒体平台中,用户可以通过Jcrop选取图片的精彩部分,制作个性化的分享图片。 六、扩展...

Global site tag (gtag.js) - Google Analytics