网页使用cropper插件进行图片的截取（剪裁）上传

做后台时客户给出一个要求：管理员在上传图片之前可以对图片进行裁剪，即只上传图片的指定局部，刚开始还想让大神指点一下写个简单的功能先，结果在网上一搜才发现，原来layui有一个叫cropper的第三方图片裁剪插件，看文档还是挺方便的，于是抱着学习（偷懒）的心态，我决定选择这个cropper实现需要的功能，废话也不多说，直接上实例代码

 

ps：关于cropper的具体信息和下载地址可以查看cropper的文档（https://fly.layui.com/extend/croppers/#doc）

 

html

<script src="../layui/layui.js"></script> //引入layui框架文件，另外，cropper的文件我也放在了里面，所以不需要另外引cropper文件

<div class="form-group-col-2">
                                <div class="form-label">缩略图：</div>
                                <div class="form-cont">
                                    <input type="text"  class="form-control form-boxed" name="FJ_Smal" style="width:500px;">
<!--                                    <button type="button" class="btn btn-secondary-outline" id="test1">选择图片</button>-->
                                    <div class="layui-input-inline layui-btn-container" style="width: auto;">
                                        <button type="button" class="layui-btn layui-btn-primary editimg">修改图片</button >
                                    </div>
                                    <span>&nbsp&nbsp&nbsp&nbsp注：建议图片采用jpg、png、gif格式，尺寸162*162，大小200K以下</span>
                                </div>
                            </div>

                            <div class="form-group-col-2">
                                <div class="form-label">缩略图预览：</div>
                                <div class="layui-input-inline">
                                    <div class="layui-upload-list" style="margin:0">
                                        <img src=" " id="srcimgurl" class="layui-upload-img" style="max-width: 200px;max-height: 200px;">
                                    </div>
                                </div>
                            </div>

 

js

 layui.config({
                                base: '/layui/cropper/' //layui自定义layui组件目录
                            }).use(['upload','croppers'], function () {
                                var upload = layui.upload
                                    , croppers = layui.croppers;

                                croppers.render({ //裁剪图片
                                    elem: '.editimg'
                                    ,saveW:162     //保存宽度
                                    ,saveH:162
                                    ,mark:1/1    //选取比例
                                    ,area:'900px'  //弹窗宽度
                                    ,url: "../upload.php?ProType=uploadImg"  //图片上传接口返回和（layui 的upload 模块）返回的JOSN一样
                                    ,done: function(res){ //上传完毕回调

                                        console.log(res);
                                        $('[name=FJ_Smal]').val(res.data.path);
                                        $("#inputimgurl").val(res.data.path);
                                        $("#srcimgurl").attr('src',res.data.path); //将图片和选定的图片地址绑定

} }); });

 

最终效果如下：

       入口页面：

 

        裁剪效果块：