图片截取插件Cropper
自己仿照github上的例子写的demo，github上的例子太抽象了，自己写的最适合自己，通俗易懂。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <link href="./css/cropper.css" rel="stylesheet"> <style> img { max-width: 100%; /* This rule is very important, please do not ignore this! */ } .prev{ display: inline-block; } </style> </head> <body> <div class="container"> <img id="image" src="./img/picture.jpg"> </div> <br><br> <!--crop是对剪切窗口的操作，move是对图片的操作--> <div> <input type="button" value="crop" id="btnCrop" /> <input type="button" value="move" id="btnMove" /> <input type="button" value="16:9" id="169"> <input type="button" value="1:1" id="11"> <input type="button" value="get" id="getCanvas"> </div> <br><br> <!--图片截取的结果显示在这里--> <div class="prev" style="width: 500px; height: 500px; overflow: hidden"></div> <div class="prev" style="width: 300px; height: 300px; overflow: hidden"></div> <div class="prev" style="width: 200px; height: 200px; overflow: hidden"></div> <br><br> <div id="getCroppedCanvas" style="width:500px; height:500px; overflow:hidden;"></div> <script src="./js/jquery-1.11.3.min.js"></script> <script src="./js/cropper.js"></script> <script> $(function(){ var image = document.getElementById("image"); //可以通过$().cropper(options)方法来设置参数。如果想改变全局默认参数，可以使用$.fn.cropper.setDefaults(options)方法。 var cropper = new Cropper(image, { aspectRatio: 16 / 9, //宽高比 preview: '.prev', //预览窗口 guides: false, //裁剪框的虚线 autoCropArea: 0.5, //0-1之间的数值，定义自动剪裁区域的大小，默认0.8 dragCrop: true, //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域 movable: true, //是否允许移动剪裁框 resizable: true, //是否允许改变裁剪框的大小 zoomable: true, //是否允许缩放图片大小 mouseWheelZoom: true, //是否允许通过鼠标滚轮来缩放图片 touchDragZoom: true, //是否允许通过触摸移动来缩放图片 rotatable: true, //是否允许旋转图片 minContainerWidth: 200, //容器的最小宽度 minContainerHeight: 200, //容器的最小高度 minCanvasWidth: 0, //canvas 的最小宽度（image wrapper） minCanvasHeight: 0, //canvas 的最小高度（image wrapper） strict: true, crop: function(e) { //当改变剪裁容器或图片时的事件函数 console.log(e.detail.x); console.log(e.detail.y); console.log(e.detail.width); console.log(e.detail.height); console.log(e.detail.rotate); console.log(e.detail.scaleX); console.log(e.detail.scaleY); }, build: function () { console.log('build'); }, built: function () { console.log('built'); }, cropstart: function (e) { console.log('cropstart', e.detail.action); }, cropmove: function (e) { console.log('cropmove', e.detail.action); }, cropend: function (e) { console.log('cropend', e.detail.action); } }); $("#btnCrop").on("click", function(){ cropper.setDragMode("crop"); }); $("#btnMove").on("click", function(){ cropper.setDragMode("move"); }); $("#11").on("click", function(){ cropper.setAspectRatio(1,1); }); $("#169").on("click", function(){ cropper.setAspectRatio(16,9); }); $("#getCanvas").on("click", function(){ $("#getCroppedCanvas").html(cropper.getCroppedCanvas()); }); }); </script> </body> </html>
API
https://www.awesomes.cn/repo/fengyuanchen/cropper
