<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" > <link href="https://www.jb51.net/css/cropper.css" > <link href="https://www.jb51.net/css/main.css" > <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --> <!--[if lt IE 9]> <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script> <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script> <![endif]--> </head> <body> <!--[if lt IE 8]> <p>You are using an <strong>outdated</strong> browser. Please <a href="https://browsehappy.com/" >upgrade your browser</a> to improve your experience.</p> <![endif]--> <!-- Content --> <div> <div> <div> <!-- <h3>Demo:</h3> --> <div>  </div> </div> <div> <!-- <h3>Preview:</h3> --> <div> <div></div> </div> </div> </div> <div> <div> <!-- <h3>Toolbar:</h3> --> <div> <button type="button" data-method="zoom" data-option="0.1" title="Zoom In"> <span data-toggle="tooltip" data-animation="false" title="$().cropper("zoom", 0.1)"> 放大 </span> </button> <button type="button" data-method="zoom" data-option="-0.1" title="Zoom Out"> <span data-toggle="tooltip" data-animation="false" title="$().cropper("zoom", -0.1)"> 缩小 </span> </button> </div> <div> <button type="button" data-method="move" data-option="-10" data-second-option="0" title="Move Left"> <span data-toggle="tooltip" data-animation="false" title="$().cropper("move", -10, 0)"> 左移 </span> </button> <button type="button" data-method="move" data-option="10" data-second-option="0" title="Move Right"> <span data-toggle="tooltip" data-animation="false" title="$().cropper("move", 10, 0)"> 右移 </span> </button> <button type="button" data-method="move" data-option="0" data-second-option="-10" title="Move Up"> <span data-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, -10)"> 上移 </span> </button> <button type="button" data-method="move" data-option="0" data-second-option="10" title="Move Down"> <span data-toggle="tooltip" data-animation="false" title="$().cropper("move", 0, 10)"> 下移 </span> </button> </div> <div> <button type="button" data-method="rotate" data-option="-90" title="Rotate Left"> <span data-toggle="tooltip" data-animation="false" title="$().cropper("rotate", -90)"> 左转90º </span> </button> <button type="button" data-method="rotate" data-option="90" title="Rotate Right"> <span data-toggle="tooltip" data-animation="false" title="$().cropper("rotate", 90)"> 右转90º </span> </button> </div> <div> <button type="button" data-method="reset" title="Reset"> <span data-toggle="tooltip" data-animation="false" title="$().cropper("reset")"> 刷新 </span> </button> <label for="inputImage" title="Upload image file"> <input type="file" accept=".jpg,.jpeg,.png,.gif,.bmp,.tiff"> <span data-toggle="tooltip" data-animation="false" title="Import image with Blob URLs"> 上传图片 </span> </label> </div> <div> <button data-method="getCroppedCanvas" data-option="{ "width": 180, "height": 90 }" type="button"> 上传头像 </button> </div> <!-- Show the cropped image in modal --> <div aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1"> <div> <div> <div> <h5>Cropped</h5> <button type="button" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">×</span> </button> </div> <div></div> <div> <button type="button" data-dismiss="modal">Close</button> <a href="javascript:void(0);" download="cropped.jpg">Download</a> </div> </div> </div> </div><!-- /.modal --> </div><!-- /.docs-buttons --> </div> <!-- Scripts --> <script src="https://www.jb51.net/js/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script> <script src="https://www.jb51.net/js/cropper.js"></script> <script src="https://www.jb51.net/js/main.js"></script> </body> </html>
cropper.js部分参数代码：