js图片裁剪控件imgareaselect

js图片裁剪控件imgareaselect

   1.添加js脚本库

    < script type = " text/javascript "  src = " jquery3.2.min.js " ></ script >
    < script type = " text/javascript "  src = " jquery.imgareaselect-0.8.js " ></ script >

    jquery   http://jquery.com/
    jquery.imgareaselect-0.8.js这里下载  http://odyniec.net/projects/imgareaselect/ 
    2.添加下列脚本

 

 $(window).load( function  ()  {
  $('#ferret').imgAreaSelect({ selectionOpacity: 0.1
  , borderWidth: 1,aspectRatio:'1:1',
 onSelectChange: preview ,onSelectEnd: getCss
  });} );

添加回调函数

/**/ /**
    图片裁剪过程中调用方法
**/
function  preview(img, selection)
{
  var scaleX = 180 / (selection.width || 1);
  var scaleY = 180 / (selection.height || 1);

  $('#ferret + div > img').css({
    width: Math.round(scaleX * 300) + 'px',
    height: Math.round(scaleY * 300) + 'px',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  });
}

/**/ /**
    图片裁剪完调用方法
**/
function  getCss(img, selection) {
    
    var str="{x1:"+selection.x1+","+
        "x2:"+selection.x2+","+
        "y1:"+selection.y1+","+
        "y2:"+selection.y2+","+
        "width:"+selection.width+","+
        "height:"+selection.height+"}";
        alert(str);

}

用例

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
< HTML >
  < HEAD >
   < TITLE >  New Document  </ TITLE >
   < META  NAME ="Generator"  CONTENT ="EditPlus" >
   < META  NAME ="Author"  CONTENT ="" >
   < META  NAME ="Keywords"  CONTENT ="" >
   < META  NAME ="Description"  CONTENT ="" >
    < script  type ="text/javascript"  src ="jquery3.2.min.js" ></ script >
    < script  type ="text/javascript"  src ="jquery.imgareaselect-0.8.js" ></ script >

   
  
< script  type ="text/javascript" >
/**//**
    图片裁剪过程中调用方法
**/
function preview(img, selection)
{
  var scaleX = 180 / (selection.width || 1);
  var scaleY = 180 / (selection.height || 1);

  $('#ferret + div > img').css({
    width: Math.round(scaleX * 300) + 'px',
    height: Math.round(scaleY * 300) + 'px',
    marginLeft: '-' + Math.round(scaleX * selection.x1) + 'px',
    marginTop: '-' + Math.round(scaleY * selection.y1) + 'px'
  });
}

/**//**
    图片裁剪完调用方法
**/
function getCss(img, selection){
    
    var str="{x1:"+selection.x1+","+
        "x2:"+selection.x2+","+
        "y1:"+selection.y1+","+
        "y2:"+selection.y2+","+
        "width:"+selection.width+","+
        "height:"+selection.height+"}";
        alert(str);

}

$(document).ready(function () {
  $('<div><img src="bee.jpg" style="position: relative;" /></div>')
    .css({
      float: 'left',
      position: 'relative',
      overflow: 'hidden',
      width: '180px',
      height: '180px'
    })
    .insertAfter($('#ferret'));
});


$(window).load(function () {
  $('#ferret').imgAreaSelect({ selectionOpacity: 0.1
  , borderWidth: 1,aspectRatio:'1:1',
    onSelectChange: preview ,onSelectEnd: getCss
  });});

</ script >

  </ HEAD >

  < BODY >
  < div >
   < img  src ="bee.jpg"  id ="ferret"  name ="ferret"  width ="300px"  height ="300px" />
   </ div >
  </ BODY >
</ HTML >

 

    完整介绍：http://odyniec.net/projects/imgareaselect/