jQuery.cropper裁剪

1.jQuery.cropper是一款使用简单且功能强大的图片剪裁jQuery插件。

1.使用步骤

 @import url("css/plugins/cropper/cropper.min.css");

<script src="js/jquery.min.js?v=2.1.4"></script>

<script src="js/plugins/cropper/cropper.min.js"></script>

html结构

2.初始化该图片剪裁插件。

$("#image").cropper({

          aspectRatio:18/13, //设置剪裁容器的比例
                preview: '.img-preview',//添加额外的元素（容器）的预览。
                viewMode:1,
                dragCrop:false,
                zoomable:false,
                crop: function(data) {
            }//当改变剪裁容器或图片时的事件函数

});

3.

/*

getCroppedCanvas([options])：
width：输出的canvas目标宽度。
height：输出的canvas目标高度。
fillColor：canvas中填充的颜色。
返回值：一个画有剪裁图片的canvas(HTMLCanvasElement)。

*/

 var canvas  =  $("#image").cropper("getCroppedCanvas",{
                    width:180,
                    height:130
                });

效果图