截图 java jsp

    <script type="text/javascript" src="${jspPath}/js/jquery/imgareaselect-0.9.10/scripts/jquery.imgareaselect.min.js"></script>
    <link href="${jspPath}/js/jquery/imgareaselect-0.9.10/css/imgareaselect-default.css" rel="stylesheet" type="text/css" />

以下jsp

function preview(img, selection)
{
   var scaleX = 100 / (selection.width || 1);
   var scaleY = 100 / (selection.height || 1);
   var width="${x2}";
   var height="${y2}";
   $("#ferret + div > img").css({
     width: Math.round(scaleX * width) + 'px',
     height: Math.round(scaleY * height) + 'px',
     marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
     marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
   });
}
 var a="";
 var b="";
 var c="";
 var d="";
function selectEnd(img, selection){
    a=selection.x1;
    b=selection.y1;
    c=selection.x2;
    d=selection.y2;
}

$(function() {

 $("#ferret"+a).imgAreaSelect({
       aspectRatio: '4:3',
       onSelectChange: preview,
       x1:0,x2:236,y1:0,y2:136,
       onSelectEnd: selectEnd,
       handles: true,
       resizable:true
    });

}；

 

 

 

<div class="container${statu.index}" style="display:none">
                                    <p>
                                        <img id="ferret${statu.index}" name="imageurl" src="${path}" />
                                    </p>
</div>

<input id="a" type="hidden" name="x1" />
                            <input id="b" type="hidden" name="y1" />
                            <input id="c" type="hidden" name="x2" />
                            <input id="d" type="hidden" name="y2" />