Jcrop Java实现截图的功能

最新推荐文章于 2021-03-25 01:40:27 发布

纪小年

最新推荐文章于 2021-03-25 01:40:27 发布

阅读量1.7k

点赞数

分类专栏：技术文章标签： java javascript 图片 js

本文链接：https://blog.csdn.net/myhappymoment/article/details/42168665

版权

技术专栏收录该内容

1 篇文章 0 订阅

订阅专栏

上传头像，并且可以截图，需要jcrop 架包，可以到网址去浏览效果下载架包：http://deepliquid.com/projects/Jcrop/demos.php

<pre name="code" class="html">//导入样式和js
<link rel="stylesheet" href="/jquery.Jcrop.min.css" type="text/css" />
<script type="text/javascript" src="/jquery-1.8.0.js"></script>
<script type="text/javascript"  src="/jquery.Jcrop.js"></script>

<script type="text/javascript">
var boundx;var boundy; 
//初始化
jcrop jQuery(function($) {
 var jcrop_api;
 $('#element_id').Jcrop({ 
aspectRatio : 1,
 onSelect: showCoords,//选中时间 
 onChange: showCoords,//改变事件 
 onRelease: clearCoords, 
 minSize :[200,200] //最小截图范围 
},function(){ 
 var bounds = this.getBounds(); //获取当前图片的宽高
boundx = bounds[0]; 
boundy = bounds[1]; 
jcrop_api = this; 
}); 

//改变的事件 
$("#coords").on('change','input',function(e){
 var x1 = $("#x1").val(), 
 x2 = $("#x2").val();
 y1 = $("#y1").val();
 y2 = $("#y2").val(); 
jcrop_api.setSelect([x1,y1,x2,y2]);
 });
 }); 
//显示移动的坐标 
function showCoords(c){
 $("#x1").val(c.x); 
 $("#y1").val(c.y);
 $("#x2").val(c.x2);
 $("#y2").val(c.y2);
 $("#w").val(c.w);
 $("#h").val(c.h); 
//预览的判断 宽 
if (parseInt(c.w) > 0) {
 //截图的大小与宽高的比率 
var rx = 120 / c.w; 
var ry = 120 / c.h; /
/预览的样式 
$('#previewImg').css({ 
//计算预览图的宽高 用比率乘图片大小 
width : Math.round(rx * 733) + 'px', //733为原图的宽，如果原图宽为拿正确，截图的预览图片比例会有问题 在这里可以用全局变量boundx动态获取
 height : Math.round(ry * 598) + 'px', //598为原图的高 boundy 为动态获取的高 
marginLeft : '-' + Math.round(rx * c.x) + 'px',
 marginTop : '-' + Math.round(ry * c.y) + 'px' }); 
} };
 function clearCoords(){
 $("#coords input").val('');
 }; 
//点击事件 
function cut(){ 
//获取坐标
 var x = $("input[name='x1']").val();
 var y = $("input[name='y1']").val();
 var w = $("input[name='w']").val();
 var h = $("input[name='h']").val(); 
//json 传值 
$.getJSON("${ctx}/cut?x=" + x + "&y=" + y +"&w=" + w,{h:h},function(data){
 }); 
}
</script>

<!--  页面部分 -->
<body>
<div id="cutImage" >  
	    <div class="bigImg" style="float: left;">  
	        <img id="element_id" src="./assets/img/1.png"/>  
	    </div>  
	    <div id="preview_box" style="width: 100px; height: 100px; overflow: hidden; margin-left: 5px;">  
	        <img id="previewImg" src="./assets/img/1.png" width="120px"/>  
	    </div>  
	    <!-- 表单存放坐标  样式需要可隐藏 -->
		<form id="coords" class="coords" action="${ctx}/cut" οnsubmit="return false;">
			<table>
				<tr>
					<td>
				 	X1 
		        	<input id="x1" type="text" name="x1" id="x1" size="4"></input>
					</td>
				</tr>
				<tr>
					<td>
				 	Y1 
		        	<input id="y1" type="text" name
		        	="y1" id="y1"  size="4"></input>
					</td>
				</tr>
				<tr>
					<td>
					X2 
		        	<input id="x2" type="text" name="x2" id="x2"  size="4"></input>
					</td>
				</tr>
				<tr>
					<td>
					Y2 
					<input id="y2" type="text" name="y2" id="y2"  size="4"></input>
					</td>
				</tr>
				<tr>
					<td>
					 W 
		        	<input id="w" type="text" name="w"  id="w"  size="4"></input>
					</td>
				</tr>
				<tr>
					<td>
					 H 
		        	<input id="h" type="text" name="h" id="h" size="4"></input>
					</td>
				</tr>
				<tr>
					<td>
					<input type="button" οnclick="cut()" value="截图"/>
					</td>
				</tr>
			</table>
		</form>
</div>
 
</body>

后台的代码是参见 http://blog.csdn.net/chenssy/article/details/8814966

  /** 
         * 图片切割 
         * @param imagePath  原图地址 
         * @param x  目标切片坐标 X轴起点 
         * @param y  目标切片坐标 Y轴起点 
         * @param w  目标切片 宽度 
         * @param h  目标切片 高度 
         */  
        public void cutImage(String imagePath, int x ,int y ,int w,int h,int boundx, int boundy){  
              //此处多了两个参数分别是页面传入的原图的宽（boundx）和高（boundy）
            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);  
                      
                    int x1 = x*srcWidth/boundx;  
                    int y1 = y*srcHeight/boundy;  
                    int w1 = w*srcWidth/boundx;  
                    int h1 = h*srcHeight/boundx;  
                      
                    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();  
            }  
        }  
        
	//后台切图
        @RequestMapping("/cut")
        public String c(String x, String y,String w,String h,HttpServletRequest req){
        	
			//名字
        	String name = "1.png";
			//路径
        	String imagePath=req.getSession().getServletContext().getRealPath("/assets/img") + "\\" + name;
			//调用的方法
        	TextController imageCut = new TextController();  
        	imageCut.cutImage(imagePath, Integer.parseInt(x), Integer.parseInt(y), Integer.parseInt(w), Integer.parseInt(h));  
        	return "";
        }