1.引入必要的js和css核心文件
<link rel="stylesheet" href="../css/cropper.css"> <script src="../js/cropper.js"></script> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
2.构建html，可以将图片或canvas直接包裹到一个块级元素中。small时预览框
<div class="box" style=" 600px;height: 300px;"> <img id="image" src="../images/Tom.jpg" alt="Picture"> </div> <div class="small" style=" 200px;height: 200px;overflow: hidden;"></div>
3.初始化插件及相关参数
var image = document.getElementById("image"); var cropper = new Cropper(image,{ //裁剪框的比例1/1 aspectRatio:NaN, //视图模式 viewMode:1,//0，1-,2-,3让图片填满画布 //开启预览效果 preview:'.small', //拖拽模式 // dragMode:'crop',//参数：move-可以移动图片和框，crop-拖拽新建框 dragMode:'move',//参数：move-可以移动图片和框，crop-拖拽新建框 //在调整窗口大小时，会重新渲染cropper responsive:true, //在调整窗口大小时，恢复裁剪区 restore:true, //检查图片是否为跨域图片 checkCrossOrigin:true, //是否开启遮罩，将未选中的地方暗色处理 modal:true, //是否显示裁剪的虚线 guides:true, //将选中的区域亮色处理 highlight:true,//默认 //是否显示网格背景 background:true, //裁剪框是否在图片的中心 center:true, //当初始化的时候（是否自动显示裁剪框）. autoCrop:true, //当初始化时，裁剪框的大小与原图的比例 autoCropArea:0.8,//0.8是默认，1是1比1 //是否允许移动图片 movable:true,//默认为true //是否允许旋转图片(函数调用时)() rotatable:true, //是否允许翻转图片(问题) scalable:true, //是否可以缩放图片 zoomable:true,//false为不能放大缩小 //是否可以通过触摸的形式来放大图片(手机端) zoomOnTouch:true, //是否允许用鼠标来放大货缩小图片 zoomOnWheel:true, //设置鼠标控制缩放的比例 wheelZoomRatio:0.2, //是否可以移动裁剪框 cropBoxMovable:true,//裁剪框不动，图片动。当movable:true //是否可以调整裁剪框的大小，默认true cropBoxResizable:true, //设置dragMode 是否可以相互切换（条件：双击鼠标可以切换） toggleDragModeOnDblclick:true, //设置Container的w和h minContainerWidth:0, minContainerHeight:200, //设置canvas的w和h // canvas太大Container装不下 minCanvasWidth:0, minCanvasHeight:0, //设置裁剪层 minCropBoxWidth:0, minCropBoxHeight:100, //一.crop开始-过程-结束的函数 //1.当插件准备完成时,执行此函数 ready:function(e){ // alert("ready"); }, //2.当裁剪框开始移动的时候会执行的函数 cropstart:function(e){ // console.log("start"); }, //3.裁剪框移动的时候会执行的函数(每一帧都会调用) cropmove:function(e){ // console.log("move"); }, //3.裁剪框移动结束的时候会执行的函数 cropend:function(e){ // console.log("end"); }, //二、重置与清除函数 //1.在裁剪框发生变化的时候会调用的函数 crop:function(e){ // console.log("cropChange"); } })
//将图像以及裁剪重置为初始状态 cropper.reset(); //清除裁剪框 cropper.clear(); //替换图片,参数1：替换的图片，参数二，boolean是否保持原来的比例 cropper.replace("../images/picture.jpg",false); //解锁 cropper.enable(); //锁定 cropper.disable(); //销毁cropper，并在图像中将整个cropper销毁(将插件销毁) cropper.destroy(); //移动x轴坐标,移动图片.相对自己的位置 cropper.move(1,0); //移动y轴坐标 cropper.move(0,1); //移动到x,有一个具体的坐标 cropper.moveTo(2,0); //移动到y cropper.moveTo(0,2); //放大 cropper.zoom(0.1); //缩小 cropper.zoom(-0.1); //放大到，原来的两倍 cropper.zoomTo(2); //缩小到 cropper.zoomTo(0.2); //逆时针旋转，度数 cropper.rotate(-45); //顺时针旋转（正数） cropper.rotate(45); //逆时针旋转到（正数） cropper.rotate(-45); //顺时针旋转（正数） cropper.rotate(45); //沿y轴翻转,当前轴不变，另一轴为-1 cropper.scale(-1,1); //沿x轴翻转 cropper.scale(1,-1); //缩放图片x坐标 cropper.scale(-1); //缩放图片X坐标 cropper.scaleX(0.5); //缩放图片Y坐标 cropper.scaleY(2); //获取数据信息(裁剪框的数据) console.log(cropper.getData()); //获取数据信息(裁剪框的数据) cropper.setData({200,height:100}); //获取Container的数据信息,没有setContainerData函数console.log(cropper.getContainerData()); //获取image的数据信息,就是图片大小 console.log(cropper.getImageData()); //获取Canvas的数据信息 console.log(cropper.getCanvasData()); //设置Canvas的数据信息 console.log(cropper.setCanvasData({left:0,top:0,200,height:200})); //获得裁剪框的详细数据 console.log(cropper.getCropBoxData()); //获得裁剪框的详细数据 console.log(cropper.setCropBoxData({left:0,top:100,00,height:200})); //获得裁剪后的图片,裁剪后的base64编码 **********重要*********** $("#message").append(cropper.getCroppedCanvas()); //修改裁剪框的长宽比 cropper.setAspectRatio(1/1); //设置拖拽模式，none,crop,move cropper.setDragMode("crop"); //获取canvas绘制的剪裁图像。 在这之后，你可以直接将canvas作为图片显示，或使用canvas.toDataURL方法获取图像的数据链接，或者使用canvas.toBlob方法获取一个blob，并通过FormData方法将它更新到服务器上（如果浏览器支持这些API） cropper.getCroppedCanvas()