File upload with cropping support using Cropper --jquery file upload

File upload with cropping support using Cropper

demo https://tkvw.github.io/jQuery-File-Upload/basic-plus-editor.html

https://github.com/tkvw/jQuery-File-Upload/blob/master/js/jquery.fileupload-image-editor.js

先使用webstorm分析(alt+7)一下文件結構

v是variable

m是Method/function

紫色的p是Property

 

options裏面有uploadImageEditorTarget，而後右鍵選中，find usages

發如今_initCropperContainer和_previewHandler兩個方法中，被調用，用來拿到editor

 搜索id="upload-image-editor"，在https://github.com/tkvw/jQuery-File-Upload/blob/master/basic-plus-editor.html#L153 找到這個控件，是用來彈窗是否顯示這個cropper

<div id="upload-image-editor" class="modal fade" role="dialog">

<div id="upload-image-editor" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Edit image</h4>
            </div>
            <div class="modal-body">
                <div class="row">
                    <div class="col-md-12">
                        <input class="form-control filename" placeholder="Filename">
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12">
                        <div class="cropper-img-container">
                            <img class="cropper-img"/>
                        </div>
                    </div>
                </div>
                <div class="row">
                    <div class="col-md-12 docs-buttons">
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="move" title="Move">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">
                                    <span class="glyphicon glyphicon-move"></span>
                                </span>
                            </button>
                            <button type="button" class="btn btn-primary" data-method="setDragMode" data-option="crop" title="Crop">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="">
                                    <span class="glyphicon glyphicon-edit"></span>
                                </span>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" data-method="zoom" data-option="0.1" title="Zoom In">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="">
                                    <span class="glyphicon glyphicon-zoom-in"></span>
                                </span>
                            </button>
                            <button type="button" class="btn btn-primary" data-method="zoom" data-option="-0.1" title="Zoom Out">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="">
                                    <span class="glyphicon glyphicon-zoom-out"></span>
                                </span>
                            </button>
                        </div>
                        <div class="btn-group">
                            <button type="button" class="btn btn-primary" data-method="rotate" data-option="-45" title="Rotate Left">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="">
                                    <span class="glyphicon glyphicon-chevron-left"></span>
                                </span>
                            </button>
                            <button type="button" class="btn btn-primary" data-method="rotate" data-option="45" title="Rotate Right">
                                <span class="docs-tooltip" data-toggle="tooltip" data-animation="false" title="" data-original-title="">
                                    <span class="glyphicon glyphicon-chevron-right"></span>
                                </span>
                            </button>
                        </div>
                    </div>
                </div>

            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                <button type="button" class="btn btn-success save">Save</button>
            </div>
        </div>
    </div>
</div>