图片截图工具


		最近给编辑做了个截图工具
一、功能：
    A：图片自动载入
    B：图片载入时，截取工具大小为图片大小
    C：所截取图片长宽比例2.5:1

二、引用插件：jquery.Jcrop.js
三、代码
[html]  
<head>  
  <meta http-equiv="Content-type" content="text/html;charset=UTF-8" />   
  <title>图片处理工具</title>  
  <script src="js/jquery.min.js" type="text/javascript"></script>  
  <script src="js/jquery.Jcrop.js" type="text/javascript"></script>  
  <script type="text/javascript" src="js/jquery.imgareaselect-width.js"></script>  
  <link rel="stylesheet" href="css/jquery.Jcrop.css" type="text/css" />  
  <link rel="stylesheet" href="css/demos.css" type="text/css" />  
  <script type="text/javascript">  
      jQuery(function($){  
      var jcrop_api, boundx, boundy;  
      imgReady('img/1.jpg', function (){  
          $('#target').Jcrop({  
          onChange: updatePreview,  
          onSelect: updatePreview,  
          onRelease:  clearCoords,  
          aspectRatio: 2.5,  
          setSelect: [ 0, 0, this.width, this.height/2.5 ]  
          },function(){  
              var bounds = this.getBounds();  
              boundx = bounds[0];  
              boundy = bounds[1];  
              jcrop_api = this;  
          });  
      });  
      function updatePreview(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 = 400 / c.w;  
              var ry = 160 / c.h;  
              $('#preview').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'  
              });  
          }  
      };  
  });  
  function clearCoords(){  
    $('#coords input').val('');  
  };  
  </script>  
</head>

补充：Web开发 , 其他 ,