cropper截图插件

插件的使用比较简单下载：

<link rel="stylesheet" href="cropper.css">
<script src="jquery.js"></script>  # 依赖jQuery
<script src="cropper.js"></script>

同时，裁剪图片需要一个放图片的容器：

<div class="container">
    <img id="image" src="" alt="">
</div>

这样html代码就结束了，接下来是js代码部分：

# 初始化裁剪框。
$('.container > img').cropper(
{
    aspectRatio: 16 / 9,
    dragMode  :'move',
    cropBoxResizable:false,
    autoCropArea:1,
    cropBoxMovable :true,
    autoCrop:true,
    background:true,
    modal:true,
    guides:true,
    highlight:false,
    zoomOnWheel:false,
    zoomOnTouch:false,
    movable:false,
    resizable:true,
    crop: function(data) 
    {
       // Output the result data for cropping image.
    }
});

初始化参数列表：
名称 类型及默认值 说明
strict 类型：Boolean，默认值true。 在strict模式中，canvas不能小于容器，剪裁容器不能再canvas之外。
responsive 类型：Boolean，默认值true。 是否在窗口尺寸改变的时候重置cropper。
checkImageOrigin 类型：Boolean，默认值true。 默认情况下，插件会检测图片的源，如果是跨域图片，图片元素会被添加crossOrigin class，并会为图片的url添加一个时间戳来使getCroppedCanvas变为可用。添加时间戳会使图片重新加载，以使跨域图片能够使用getCroppedCanvas。在图片上添加crossOrigin class会阻止在图片url上添加时间戳，及图片的重新加载。
background 类型：Boolean，默认值true。 是否在容器上显示网格背景。
modal 类型：Boolean，默认值true。 是否在剪裁框上显示黑色的模态窗口。
guides 类型：Boolean，默认值true。 是否在剪裁框上显示虚线。
highlight 类型：Boolean，默认值true。 是否在剪裁框上显示白色的模态窗口。
autoCrop 类型：Boolean，默认值true。 是否在初始化时允许自动剪裁图片。
autoCropArea 类型：Number，默认值0.8（图片的80%）。 0-1之间的数值，定义自动剪裁区域的大小。
dragCrop 类型：Boolean，默认值true。 是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域。
movable 类型：Boolean，默认值true。 是否允许移动剪裁框。
resizable 类型：Boolean，默认值true。 是否允许改变剪裁框的大小。
zoomable 类型：Boolean，默认值true。 是否允许放大缩小图片。
mouseWheelZoom 类型：Boolean，默认值true。 是否允许通过鼠标滚轮来缩放图片。
touchDragZoom 类型：Boolean，默认值true。 是否允许通过触摸移动来缩放图片。
rotatable 类型：Boolean，默认值true。 是否允许旋转图片。
minContainerWidth 类型：Number，默认值200。 容器的最小宽度。
minContainerHeight 类型：Number，默认值100。 容器的最小高度。
minCanvasWidth 类型：Number，默认值0。 canvas 的最小宽度（image wrapper）。
minCanvasHeight 类型：Number，默认值0。 canvas 的最小高度（image wrapper）。
build 类型：Function，默认值null。 build.cropper事件的简写方式。
built 类型：Function，默认值null。 built.cropper事件的简写方式。
dragstart 类型：Function，默认值null。 dragstart.cropper事件的简写方式。
dragmove 类型：Function，默认值null。 dragmove.cropper事件的简写方式。
dragend 类型：Function，默认值null。 dragend.cropper事件的简写方式。
zoomin 类型：Function，默认值null。 zoomin.cropper事件的简写方式。
zoomout 类型：Function，默认值null。 zoomout.cropper事件的简写方式。

# 旋转90度
$('.container > img').cropper('rotate', 90)；
$('.container > img').cropper('rotate', -90)；
# 恢复
$('.container > img').cropper('reset')；
# 关闭裁剪
$('.container > img').cropper('destroy')；
# 获取裁剪后的图片信息
$('.container > img').cropper('getCroppedCanvas')；

对象方法列表：
方法 参数 说明
move offsetX：类型：Number，水平方向上移动的大小，单位像素。offsetY：类型：Number，垂直方向上移动的大小，单位像素。 移动图片
zoom ratio： 类型：Number 正数 或 负数 缩放图片
rotate 类型 Number 正数 或 负数 旋转图片
enable 无 使裁剪可用
disable 无 禁用裁剪
reset 无 重置裁剪框内容
clear 无 清空裁剪区域
replace 新图片的url 替换图片的URL重建cropper
getData

返回裁剪图片当时信息 :

x：剪裁区域左侧的偏移。
y：剪裁区域距上部的偏移。
width：剪裁区域的宽度。
height：剪裁区域的高度。
rotate：图片的旋转角度。
getContainerData

返回当前容器的宽高。
getImageData

输出图片的位置和尺寸大小 ：

left：图片的左侧偏移。
top：图片的上部偏移。
width：图片的宽度。
height：图片的高度。
getCroppedCanvas

返回画布绘制裁剪的图像（canvas）

可以直接使用canvas展示图片。

$('div').append(canvas);

或者使用canvas.toDataURL方法获取图像的数据链接。

var lis = info.toDataURL("image/jpeg", 0.3);
$('.container img').attr('src',lis);

或者使用canvas.toBlob方法获取一个blob，并通过FormData方法将它更新到服务器上

$('.container > img').cropper('getCroppedCanvas').toBlob(function (blob) {
  var formData = new FormData();
  formData.append('croppedImage', blob);
  $.ajax('/path/to/upload', {
    method: "POST",
    data: formData,
    processData: false,
    contentType: false,
    success: function (msg) {
      console.log('Upload success');
    },
    error: function () {
      console.log('Upload error');
    }
  });
});

补充下：由于项目中往往规定了图片的大小（裁剪框大小），并且图片在容器中进行的，容器宽高可以动态的根据当前图片的宽高进行设置，这样图片就是等比出现，不存在是图片缩放，移动等操作（如果非必须）； 效果如下：

但是可能出现的情况就是，如果图片太大，势必整个浏览器都被图片占满了，这时现将图片按照一定比例等比缩放 ：

#等比缩放代码
function AutoResizeImage( maxWidth , maxHeight , imgw , imgh )
{
    var hRatio;
    var wRatio;
    var Ratio = 1;
    wRatio = maxWidth / imgw;
    hRatio = maxHeight / imgh;
    if( maxWidth == 0 && maxHeight == 0 )
    {
      Ratio = 1;
    } else if ( maxWidth == 0 )
    {
      if ( hRatio < 1 ) Ratio = hRatio;
    } else if ( maxHeight == 0 )
    {
      if ( wRatio < 1 ) Ratio = wRatio;
    } else if ( wRatio < 1 || hRatio < 1 )
    {
      Ratio = ( wRatio <= hRatio ? wRatio : hRatio );
    }
    if ( Ratio < 1 )
    {
      imgw = imgw * Ratio;
      imgh = imgh * Ratio;
    }
    return {width:imgw,height:imgh};
}
# 调用
AutoResizeImage( 1600 , 900 ,当前图片宽 , 当前图片高) // 等比缩放
# 配合裁剪实例
 if( window.FileReader )
    {
       var ReaderObj = new FileReader();
       ReaderObj.readAsDataURL( 图片文件信息 );
       ReaderObj.onload = function( res )
       {
          var imageObj = new Image();
          imageObj.src = res.target.result;
          imageObj.onload = function()
          {
              var pro_info = AutoResizeImage(1600,900,imageObj.width,imageObj.height) // 等比缩放
              $("#image").attr('src',res.target.result);
              $('.container').css({'width':pro_info.width,'height':pro_info.height});
              $('.container > img').cropper({
                aspectRatio: 16 / 9,
                dragMode  :'move',
                cropBoxResizable:false,
                autoCropArea:1,
                cropBoxMovable :true,
                autoCrop:true,
                background:true,
                modal:true,
                guides:true,
                highlight:false,
                zoomOnWheel:false,
                zoomOnTouch:false,
                movable:false,
                resizable:true,
                crop: function(data) {
                    // Output the result data for cropping image.
                }
            });
          }
}

以上是一些项目中会用到的常用方法，属性，具体详细其他方法，属性说明参考官方文档。

出处：http://38d7fa42.wiz03.com/share/s/0UR_F20y3QNb2c1Fmj2pOjBC2XKYZT3nJktL2sbl8s0fBRzk