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">×</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>
本文暂时没有评论，来添加一个吧(●'◡'●)