網頁使用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); //將圖片和選定的圖片地址綁定

} }); });

 

最終效果如下：

       入口頁面：

 

        裁剪效果塊：