头像截取图片上传 js插件

先看一下整体效果
头像截取图片上传 js插件
页面html
                <div class="row">
                    <div class="tabs-container">
                        <ul class="nav nav-tabs">
                            <li>
                                <a style="color: #676a6c;padding: 10px 30px 10px 40px;"> 上传头像<span style="color:red;">*</span></a>
                            </li>
                            <li class="active">
                                <a data-toggle="tab" href="#tab-1" aria-expanded="true"> 本地上传</a>
                            </li>
                            <li class="">
                                <a data-toggle="tab" href="#tab-2" aria-expanded="false">相册选取</a>
                            </li>
                        </ul>
                        <div class="tab-content">
                            <div id="tab-1" class="tab-pane active">
                                <div class="panel-body" style="height:475px">
                                    <div class="container">
                                        <div class="imageBox">
                                            <div class="thumbBox"></div>
                                            <div class="spinner" style="display: none">Loading...</div>
                                        </div>
                                        <div class="cropped"></div>
                                        <div class="action">
                                            <div class="new-contentarea tc">
                                                <a href="javascript:void(0)" class="upload-img">
                                                    <label for="upload-file">上传图像</label>
                                                </a>
                                                <input type="file" class="" name="upload-file" id="upload-file" />
                                            </div>
                                            <input type="button" id="btnCrop" class="Btnsty_peyton" value="裁切">
                                            <input type="button" id="btnZoomIn" class="Btnsty_peyton" value="+">
                                            <input type="button" id="btnZoomOut" class="Btnsty_peyton" value="-">
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="tab-2" class="tab-pane">
                                <div class="panel-body" id="Album" style="height:475px;overflow: scroll;overflow-x: hidden;">
                                    <a class="fancybox" title="选取该照片">
                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_01.jpg" alt="图片" />
                                    </a>
                                    <a class="fancybox" title="选取该照片">
                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_02.jpg" alt="图片" />
                                    </a>
                                    <a class="fancybox" title="选取该照片">
                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_03.jpg" alt="图片" />
                                    </a>
                                    <a class="fancybox" title="选取该照片">
                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_04.jpg" alt="图片" />
                                    </a>
                                    <a class="fancybox" title="选取该照片">
                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_05.jpg" alt="图片" />
                                    </a>
                                    <a class="fancybox" title="选取该照片">
                                        <img src="/assets/img/Inteall/HeadPortrait/user_Doctor_06.jpg" alt="图片" />
                                    </a>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
View Code