jQuery.cropper裁剪

来源：互联网发布：淘宝有没有死店一说编辑：程序博客网时间：2024/06/14 05:15

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) {            }//当改变剪裁容器或图片时的事件函数});

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

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

效果图

0 0