图片截图插件的总结

1.jcorp 星级：☆☆☆☆☆ 用法：简单，明了。

js:完善的demo，js也总结的很精简。原理很简单，就是在 大img上拖动一个div，获取div的top,left,right,bottom位置， 然后把小图的img同时改变，margintop和marginleft让图片移动，在用户有中选取和截图的感觉。

代码完善性：☆☆☆☆☆ 代码易读性：☆☆☆（）基础不好的阅读费劲

<script type="text/javascript">
  jQuery(function($){

    // Create variables (in this scope) to hold the API and image size
    var jcrop_api,
        boundx,
        boundy,

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

        xsize = $pcnt.width(),
        ysize = $pcnt.height();
    
    console.log('init',[xsize,ysize]);
    $('#target').Jcrop({
      onChange: updatePreview,
      onSelect: updatePreview,
      aspectRatio: xsize / ysize
    },function(){
      // Use the API to get the real image size
      var bounds = this.getBounds();
      boundx = bounds[0];
      boundy = bounds[1];
      // Store the API in the jcrop_api variable
      jcrop_api = this;

      // Move the preview into the jcrop container for css positioning
      $preview.appendTo(jcrop_api.ui.holder);
    });

    function updatePreview(c)
    {
      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'
        });
      }
    };

  });

</script>

html结构： 这是三种插件中最简单的一个html的结构。一个原图一个id，小图只需要手写上css就可以完美的想变成你想要的样子。 代码结构：☆☆☆☆☆

<img src="demo_files/sago.jpg" id="target" alt="" />

  <div id="preview-pane">
    <div class="preview-container">
      <img src="demo_files/sago.jpg" class="jcrop-preview" alt="" />
    </div>
  </div>

css：自带的css，就有很细节的选择边框蚂蚁爬动的效果了。很细节处理也很完美。

<link rel="stylesheet" href="../css/jquery.Jcrop.css" type="text/css" />

2.jquery.imgareaselect-0.9.10 星级：☆☆☆
用法:还算简单。有一些小bug； 1）bug ：和layer一起用的时候会因为zindex的问题，选择框出不来 在底下 而且 关闭了layer的弹出框后 imgareaselect的选择框还在底下不会消失 就是必须点击了图片才会消失 而其他的动作却不会停止这个动作。 解决： imgareaselect的初始值是手动设置一次zindex。然后关于选择框的问题就是在layer end的时候写一个回调函数：

end: function(){
              $(".imgareaselect-selection").parent().css({
                  display:'none'
              });
                $(".imgareaselect-outer").css({
                    display:'none'
                })
            }

js:结构简单，易于阅读;原理都是一样的。

$(document).ready(function() {
        $('#photo').imgAreaSelect( {handles:true, fadeSpeed:200,onSelectEnd : preview,zIndex:99999999});
    });

    // 如果加上aspectRatio: '1:1'，$('#photo').imgAreaSelect( {aspectRatio: '1:1',handles:true, fadeSpeed:200, onSelectEnd : preview});则选取区域固定为正方形。
    
    function preview(img, selection)
    {
        if(!selection.width || !selection.height)
            return;

        var scaleX = 135 / selection.width;
        var scaleY = 135 / selection.height;

        var imgActualWidth, imgActualHeight;
        var img = new Image();
        img.src = document.getElementById('photo').src;
        imgActualWidth = img.width;
        imgActualHeight = img.height;

        $('#preview img').css( {
            width : Math.round(scaleX *imgActualWidth ),
            height: Math.round(scaleY *imgActualHeight ),
            marginLeft: -Math.round(scaleX * selection.x1),
            marginTop: -Math.round(scaleY * selection.y1)

        });


    }

html:结构简单；主要控制就是一个 id为photo和一个id为preview；

<div style=" width:315px; height:200px;float: left; margin-right: 60px; z-index: 19892015;"  >
                    <img id="photo" src="../../images/imgs/homemedical.png" style="width:351px; height:200px;">
                </div>

                <div id="preview" style="width:135px; height:135px; overflow:hidden; float:left;z-index: 19892015;">
                    <img   src="../../images/imgs/homemedical.png" style="width:351px; height:200px;">
                </div>

css：也是插件自带的，一共有三个css共你选择，我就选择了默认的css，还有一个动画的和只有你想使用不赞同的选项时才用这个样式表；

3.croper 星级：☆☆☆
感觉使用起来有点反人类。。。自己自定义起来很困难。。 因为这个插件是只能的去引用你的图片。。很只能的算出来你的 宽高，然后很智能的给你全部都定义出来。。。反而你想自己定义的话，就有了局限性

而且有一个bug就是有时候它算错了。。。你还不知道为什么会算错了。。。 这是一个我用起来最日狗了的一个插件。。

js:多，但是性能很全，你想要的它都给你定义出来了。 css：一个自带的css定义。 html：是最简答的，只需要一个img，剩下的小图片自动获取你的地址然后append进去。 样式是写的最少的，也是最智能的，也是最难控制的。