Jcrop图片剪切实例

最新推荐文章于 2024-09-13 17:32:25 发布
最新推荐文章于 2024-09-13 17:32:25 发布
阅读量110 收藏
点赞数
文章标签： json ui java
原文链接：http://www.cnblogs.com/konghou/p/3819019.html
版权 
一.创建一个弹出窗
1.html代码
<div id="BgDiv"></div>
<div id="imgEditArea" style="display:none;top:0;">
    <h2><fmt:message key="productDetail.lbl.editImg"/><a href="#" id="btnClose" οnclick="javascript:closeDiv('imgEditArea')"><fmt:message key="productDetail.lbl.closeDiv"/></a></h2>
    <table border='0'>
        <tr>
            <td>
                <div class="jc-demo-box" id="divPreview">
                      <img src="<c:url value="/files/BusiLic/shuiyin.jpg"/>" id="target" alt="[Jcrop Example]" />
                </div>
            </td>
            <td valign="top" align="center" id="tdImg">
                <div id="preview-pane" style="margin:30px">
                    <div class="preview-container" id="preview-container">
                         <img src="<c:url value="/files/BusiLic/shuiyin.jpg"/>" id="imgView" class="jcrop-preview" alt="Preview" />
                    </div>
                  </div>
                <form  enctype="multipart/form-data" id="uploadform" method="post" name="form2">
                    <div id="uploadBox">
                        <input type="file" name="file" id="file" οnchange="PreviewImage(this,'target','divPreview')" size="6"/><br/><br/>
                        <input type="submit"  value="<fmt:message key="productDetail.lbl.saveImg"/>" id="btnSave" value="upload"></input>
                    </div>
                    <br/><fmt:message key="productDetail.lbl.msgImg"/>
                </form>
            </td>
        </tr>
    </table>    
</div>
2.css代码
#BgDiv{background-color:#FFFFFF; position:absolute; z-index:99; left:0; top:0; display:none; width:100%; height:100%;opacity:0.5;filter: alpha(opacity=50);-moz-opacity: 0.5;}
 .s_tab td{border:0;}    
    
#imgEditArea{position:absolute;width:90%; left:5%; top:0%; margin-left:0px; margin-top:300px;;height:auto; z-index:100;background-color:#fff; border:1px #8FA4F5 solid; padding:1px;}
#imgEditArea h2{ height:25px; font-size:14px; background-color:#8FA4F5; position:relative; padding-left:10px; line-height:25px;}
#imgEditArea h2 a{position:absolute; right:5px; font-size:12px; color:#000000}
#imgEditArea .form{padding:10px;}

3.弹出层展现
function ShowDIV(thisObjID) {
    $("#BgDiv").css({ display: "block", height: $(document).height() });
    $("#" + thisObjID ).css("top", "10px");
    $("#" + thisObjID ).css("display", "block");
}
4.弹出层隐藏
function closeDiv(thisObjID) {
    if(api!=null){
        api.destroy();    
    }
 
    $("#target").attr("src","<c:url value="/files/BusiLic/shuiyin.jpg"/>");
    $("#imgView").attr("src","<c:url value="/files/BusiLic/shuiyin.jpg"/>");
    $("#x").val("");
     $("#y").val("");
     $("#w").val("");
     $("#h").val("");
    $("#BgDiv").css("display", "none");
    $("#" + thisObjID).css("display", "none");
}
二.图片选择显示截取并保存
1. 创建两个<img>
    <div class="jc-demo-box" id="divPreview">
          <img src="<c:url value="/files/BusiLic/shuiyin.jpg"/>" id="target" alt="[Jcrop Example]" />
    </div>

    <div id="preview-pane" style="margin:30px">
        <div class="preview-container" id="preview-container">
             <img src="<c:url value="/files/BusiLic/shuiyin.jpg"/>" id="imgView" class="jcrop-preview" alt="Preview" />
        </div>
     </div>
2. 图片选取和保存图片
<form  enctype="multipart/form-data" id="uploadform" method="post" name="form2">
    <div id="uploadBox">
        <input type="file" name="file" id="file" οnchange="PreviewImage(this,'target','divPreview')" size="6"/><br/><br/>
        <input type="submit"  value="<fmt:message key="productDetail.lbl.saveImg"/>" id="btnSave" value="upload"></input>
    </div>
    <br/><fmt:message key="productDetail.lbl.msgImg"/>
</form>
3. 选取图片,并在改区域显示
//js本地图片预览，兼容ie[6-9]、火狐、Chrome17+、Opera11+、Maxthon3
    function PreviewImage(fileObj,imgPreviewId,divPreviewId){
        $("#x").val("");
        $("#y").val("");
        $("#w").val("");
        $("#h").val("");
        if(api!=null){
            api.destroy();    
        }
        var divId;
        var allowExtention=".jpg,.bmp,.gif,.png";//允许上传文件的后缀名document.getElementById("hfAllowPicSuffix").value;
        var extention=fileObj.value.substring(fileObj.value.lastIndexOf(".")+1).toLowerCase();            
        var browserVersion= window.navigator.userAgent.toUpperCase();
        if(allowExtention.indexOf(extention)>-1){ 
            if(fileObj.files){//HTML5实现预览，兼容chrome、火狐7+等
                if(window.FileReader){
                    var reader = new FileReader(); 
                    reader.onload = function(e){
                        document.getElementById(imgPreviewId).setAttribute("src",e.target.result);
                        $("#imgView").attr("src",$("#"+imgPreviewId).attr("src"));
                        createJCrop(imgPreviewId);
                    };  
                    reader.readAsDataURL(fileObj.files[0]);
                }else if(browserVersion.indexOf("SAFARI")>-1){
                    alert(getMessage(msgE0042));
                }
            }else if (browserVersion.indexOf("MSIE")>-1){
                $("#uploadform").ajaxForm({
                    url:"/BML/file/proimg/iesrc",
                    type:"post",
                    dataType:"json",
                    success:function(data){
                    $("#"+imgPreviewId).attr("src","/BML/files/proInfo/temp/"+data.seriName);
                    $("#imgView").attr("src","/BML/files/proInfo/temp/"+data.seriName);
                    createJCrop(imgPreviewId);
                    },error:function(){
                        alert(getMessage(msgE0005, uploadPic));
                    }
                 });
                $("#uploadform").submit();
            }else if(browserVersion.indexOf("FIREFOX")>-1){//firefox
                var firefoxVersion= parseFloat(browserVersion.toLowerCase().match(/firefox\/([\d.]+)/)[1]);
                if(firefoxVersion<7){//firefox7以下版本
                    document.getElementById(imgPreviewId).setAttribute("src",fileObj.files[0].getAsDataURL());
                    $("#imgView").attr("src",$("#"+imgPreviewId).attr("src"));
                    createJCrop(imgPreviewId);
                }else{//firefox7.0+                    
                    document.getElementById(imgPreviewId).setAttribute("src",window.URL.createObjectURL(fileObj.files[0]));
                    $("#imgView").attr("src",$("#"+imgPreviewId).attr("src"));
                    createJCrop(imgPreviewId);
                }
            }else{
                document.getElementById(imgPreviewId).setAttribute("src",fileObj.value);
                $("#imgView").attr("src",$("#"+imgPreviewId).attr("src"));
                $(".jcrop-preview").attr("src",$("#"+imgPreviewId).attr("src"));
                createJCrop(imgPreviewId);
            }         
        }else{
            alert(getMessage(msgE0041));
            fileObj.value="";//清空选中文件
            if(browserVersion.indexOf("MSIE")>-1){                        
                fileObj.select();
                document.selection.clear();
            }                
            fileObj.outerHTML=fileObj.outerHTML;
        }
    }
3. 创建jcrop,图片剪切区域选择最主要的函数
    function createJCrop(divId,width,height) {
        // Create variables (in this scope) to hold the API and image size
         var jcrop_api,
            boundx,
             boundy,

             // Grab some information about the preview pane
             $pcnt = $('#preview-pane .preview-container'),
             $pimg = $('#preview-pane .preview-container img'),

             xsize = $pcnt.width(),
             ysize = $pcnt.height();
         
         api = $.Jcrop('#'+divId, {
                onSelect :updatePreview,
                onChange :updatePreview,
                setSelect: [ 125, 125, 250, 250 ],
                aspectRatio : 1
            });
         var bounds = api.getBounds();
              boundx = bounds[0];
              boundy = bounds[1];
            // Store the API in the jcrop_api variable
            jcrop_api = api;
            //$preview.appendTo(jcrop_api.ui.holder);
         
         function updatePreview(c)
         {
             var rx = width / c.w;
            var ry = height / c.h;
            var ow = $("#"+divd).width();
            var oh = $("#"+divd).height();
            
            $("#w").attr("value",Math.round(rx * ow));
            $("#h").attr("value",Math.round(ry * oh));
            $("#x").attr("value",Math.round(rx * c.x));
            $("#y").attr("value",Math.round(ry * c.y));
             if (parseInt(c.w) > 0)
             {
                 var rx = xsize / c.w;
                 var ry = ysize / c.h;

                 $pimg.css({
                       width: Math.round(rx * boundx) + 'px',
                       height: Math.round(ry * boundy) + 'px',
                       marginLeft: '-' + Math.round(rx * c.x) + 'px',
                       marginTop: '-' + Math.round(ry * c.y) + 'px'
                 });
              }
         };
    }
4.    用4个<input type="hidden">用于存放图片截取的坐标和长宽
    <input type="hidden" id="x" /><br/>
    <input type="hidden" id="y" /><br/>
    <input type="hidden" id="w" /><br/>
    <input type="hidden" id="h" /><br/>
5. 截取图片后保存
$("#uploadform").ajaxForm({
    url:"/BML/file/proimg/uploadImg?point="+cutPoint,
    type:"post",
    dataType:"json",
    success:function(data){
        var browserVersion= window.navigator.userAgent.toUpperCase();
        if(api!=null){
            api.destroy();    
        }
        if (browserVersion.indexOf("MSIE")>-1){
            if(browserVersion.indexOf("MSIE 6")>-1){//ie6                    
                $("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
            }else{//ie[7-9]
                $("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
                //document.getElementById("targetNew").setAttribute("src","/BML/files/proInfo/"+data.seriName);
            }
        }else{
            $("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
        }
        $("#picpath0").val(data.seriName);
    },error:function(){
         alert(getMessage(msgE0043));
    }
});
6.图片保存
1.form表单提交，把文件传到后台。
2.jsp代码
$("#uploadform").ajaxForm({
    url:"/BML/file/proimg/uploadImg?point="+cutPoint,
    type:"post",
    dataType:"json",
    success:function(data){
        var browserVersion= window.navigator.userAgent.toUpperCase();
        f(api!=null){
            api.destroy();    
        }
        if (browserVersion.indexOf("MSIE")>-1){
            if(browserVersion.indexOf("MSIE 6")>-1){//ie6                    
                $("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
            }else{//ie[7-9]
                $("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
                //document.getElementById("targetNew").setAttribute("src","/BML/files/proInfo/"+data.seriName);
            }
        }else{
            $("#target1").attr("src","/BML/files/proInfo/"+data.seriName);
        }
        $("#picpath0").val(data.seriName);
    },error:function(){
         alert(getMessage(msgE0043));
    }
});

closeDiv('imgEditArea');
3.后台java代码
@RequestMapping("/proimg/uploadImg")
public @ResponseBody FileHandResult uploadCutImg( Model model,@RequestParam MultipartFile file,@RequestParam String point,HttpServletRequest request,HttpServletResponse response) throws Exception{
    String[] str=point.split(",");
    String x = str[0];
    String y = str[1];
    String w = str[2];
    String h = str[3];                
    int width = Integer.parseInt(w);
    int height = Integer.parseInt(h);
    int rx = Integer.parseInt(x);
    int ry = Integer.parseInt(y);
        
    FileHandResult res = new FileHandResult();
    if(file.getSize()>1000000){
        res.setResult(FileHandResult.REQUEST_FAIL);
        model.addAttribute("msg","图片尺寸太大");
        return null;
    }
    FileInputStream is = null ;
    ImageInputStream iis = null;
    try {
        String name = file.getOriginalFilename();//文件名
        String ext = "jpg";
        //String seriName = name.substring(0,name.lastIndexOf("."))+new Date().getTime()+"."+ext;
        String seriName = "proInfo"+new SimpleDateFormat("yyyyMMddHHmmss").format(new Date())+"."+ext;
        String path = request.getSession().getServletContext().getRealPath("/files/proInfo");//文件路径
            
        File srcfile = new File(path+File.separator+seriName);
            
        Image image =ImageIO.read(file.getInputStream());
        BufferedImage tag = new BufferedImage(width,height,BufferedImage.TYPE_INT_RGB);
        //根据比例缩放图片
        tag.getGraphics().drawImage(image.getScaledInstance(width, height, Image.SCALE_SMOOTH),0,0,null);
        FileOutputStream out = new FileOutputStream(srcfile);  
        JPEGImageEncoder encoder = JPEGCodec.createJPEGEncoder(out);  
        encoder.encode(tag);  
        out.close();  
                
        is = new FileInputStream(srcfile);
        iis = ImageIO.createImageInputStream(is);
            
        Iterator<ImageReader> it= ImageIO.getImageReadersByFormatName(ext);
        ImageReader reader = it.next();
        reader.setInput(iis);
            
        ImageReadParam param =  reader.getDefaultReadParam();
        //根据坐标点长宽截取图片
        Rectangle rect = new Rectangle(rx,ry,170,170);
        param.setSourceRegion(rect);
            
        BufferedImage bi = reader.read(0, param);
        ImageIO.write(bi, ext, new File(path+File.separator+seriName));
        res.setSeriName(seriName);
    } catch (Exception e) {
        throw new Exception();
    }finally{
        if(is!=null){
            is.close() ;       
            if(iis!=null)
            iis.close();  
        }
    }
        
    response.setContentType("text/html");
    res.setResult(FileHandResult.REQUEST_OK);
    return res;
}

 

转载于:https://www.cnblogs.com/konghou/p/3819019.html

weixin_30425949
关注
图片剪切工具Jcrop在JavaScript中使用
qq_40595166的博客
02-05 387
最近接手了一个JavaScript，html，css开发的项目，需要做头像上传的功能，需要用户在页面截取图片。找了相关资料后决定用Jcrop。在使用过程中，发先网上的例子没法直接拿过来用，然后官方文档又不详细，这里记录一下使用方法。 GitHub：https://github.com/tapmodo/Jcrop 一、使用 1.HTMl 引用以上两个文件即可，文件可从GitHub下载 <link rel="stylesheet" href="css/jcrop.css...
使用jcrop实现裁切图片
charlene0824的博客
05-30 3595
jcrop为基于jquery库实现的图片裁切插件。当使用该插件使需要引入jquery和jcrop（包括js文件和css文件）。 //css文件的引入 <link rel="stylesheet" type="text/css" href="/Jcrop/css/jquery.Jcrop.min.css"> //js文件的引入 <script type="text/javascript" src
jQuery Jcrop 实现图像裁剪实例
03-02
jQuery Jcrop 实现图像裁剪实例。
jcrop的例子
thewebcode
06-13 280
&lt;html&gt; &lt;head&gt; &lt;script src='js/jquery-1.5.1.js'&gt;&lt;/script&gt; &lt;script src='js/jquery.Jcrop.js'&gt;&lt;/script&gt; &lt;style type="text/css"&gt; body{ bac
使用JCrop进行图片裁剪，裁剪js说明，裁剪预览，裁剪上传，裁剪设计的图片处理的工具类和代码
涂作权的博客
09-10 9845
1.要想制作图片裁剪功能，可以使用网上的裁剪工具JCrop，网址是：https://github.com/tapmodo/Jcrop/案例效果如下：2.引入JCrop的js代码，具体要引入那些js可以参考JCrop案例:3.编写的html代码如下： div id="light" class="white_content">        div class="vatitlee">
jcrop简单实例
····
01-15 379
1. 首先从官方网站上下载jcrop压缩包， 解压缩将js和css文件放入项目路径 [url]http://deepliquid.com/content/Jcrop_Download.html[/url] 2. 代码实例： [code="html"] jcrop.html $(function() { var jcr...
jcrop图片剪切工具
06-19
**Jcrop图片剪切工具详解** Jcrop是一款强大的JavaScript图片裁剪库，它允许用户在前端自由地选择和裁剪图片，广泛应用于网页中的图片预览、上传前的裁剪等场景。这款工具以其直观的用户界面和灵活的配置选项，深受...
Jcrop图片剪切
11-26
【Jcrop图片剪切】是一种基于JavaScript的图片裁剪库，它允许用户在网页上自由选择图片的裁剪区域，从而实现自定义的图片尺寸调整。Jcrop是轻量级的，易于集成到任何Web项目中，尤其适用于需要提供用户交互式图片...
jcrop实现剪切上传图片
02-15
在本文中，我们将深入探讨如何使用Jcrop实现剪切上传图片以及相关的操作实例。 首先，Jcrop是基于jQuery库的，因此在使用Jcrop之前，你需要确保你的项目中已经引入了jQuery。你可以通过CDN或者本地文件的方式引入...
jquery.Jcrop结合JAVA后台实现图片裁剪上传实例
11-28
3.利用jcrop裁剪工具对图片进行裁剪并且实时预览 4.点击确定按钮将裁剪用到的参数传入后台，后台图片进行剪切，之后缩放成我们需要的格式 5.最后将图片路径传到前台进行展示 前台页面代码为： <script src="j
[Bootstrap-插件使用]Jcrop+fileinput组合实现头像上传功能实例代码
08-31
业务需求是实现一个头像上传功能，要求用户上传的图片能够在服务器端被剪切成正方形。为了达到这一目的，我们需要使用Jcrop来收集用户的裁剪意图，然后在服务器端根据这些信息进行实际的裁剪操作。Jcrop会在图片上...
JQuery 图像裁剪插件Jcrop实现图片上传功能(mysql DB)
周洲 （Julie）
09-25 3255
需求最近在做一个企业设置的模块，要求可以上传企业logo到mysql数据库当中，在企业登录首页的时候，就可以显示出来这个logo。我实现这个功能使用了一个JQ的插件，可以裁剪上传的图片，实现logo的简单处理制作。代码实现 引用Jcrope 的包在jsp中 <!-- 引用jcrope的jar包 --><script type="text/javascript" src="${pageCont
jQuery JCrop插件的一个问题
weixin_30239339的博客
08-11 133
最近应项目需要用到了jQuery的JCrop插件，一个用JS裁减图片的功能，非常好用。但这几天发现了一个头痛的问题，在firefox下正常，但在IE下，无论是IE6不是IE7都出现“对象不支持此属性或方法”的错误，而且报错的行数是在插件的脚本本身里，真是有点摸不着头脑了。代码<htmlxmlns="http://www.w3.org/1999/xhtml">&lt...
使用jcrop进行头像剪切
热门推荐
chenssy 的技术博客
04-17 1万+
项目需要做一个头像截取的功能，类似于QQ头像截取功能。在网上搜了下，最后使用jQuery插件jcrop来截取， 在后台来进行图片切割。         头像截取的原理：在前台使用jcrop获取切面的x轴坐标、y轴坐标、切面高度、切面宽度，然后将这四个值传给后 台。在后台要进行放大处理：将切面放大N倍，N=原图/前台展示的头像。即X = X*原图宽/前图宽，Y = Y*原图高/前 图高，
Gson转换
最新发布
09-13 317
gson格式转换.create());@Overridetry {
Vue使用query传参Boolean类型，刷新之后转换为String问题
q879936814的博客
09-12 417
要解决这个问题，不能直接Boolean处理，因为如果传入false，那么转换成字符串，Boolean(‘false’)会变成true；做项目时发现第一次进入页面时传参是正常的Boolean类型，刷新之后变成了String，这是浏览器进行的一次强制转换；解决方法：使用JSON.parse处理参数。
sqlalchemy JSON 字段写入时中文序列化问题
llc的博客
09-12 386
_table_args__ = ({"comment": "表名称"})...extra = Column(JSON, comment="其他属性")...
C++与QML的数据交互
qq_50679120的博客
09-11 531
这里没什么好说的，在C++中组合好json后，通过信号发送到qml中，qml中是可以解析json的。通过Q_PROPERTY属性，可以轻松地在QML中读取和修改数据，并将其更新到C++中，先创建一个类。在QML接收，直接通过data.can_id这样的形式去访问结构体中的元素。这两个也没什么好说的，在C++中直接发送信号就好了，在C++中声明并注册一个结构体。然后发送信号到QML中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值