E:
/
home
/
kbcomunicacao1
/
Web
/
adm
/
img-perfil
/
docs
/
Upload File
HOME
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="x-ua-compatible" content="ie=edge"> <meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="description" content="A simple jQuery image cropping plugin."> <meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image cropping, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development"> <meta name="author" content="Fengyuan Chen"> <title>Cropper</title> <link rel="apple-touch-icon" href="apple-touch-icon.png"> <link rel="shortcut icon" href="favicon.ico"> <link rel="icon" href="favicon.ico"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <link rel="stylesheet" href="css/cropper.min.css"> <link rel="stylesheet" href="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> <!-- header --> <header class="navbar navbar-static-top docs-header" id="top"> <div class="container"> <div class="navbar-header"> <button type="button" class="navbar-toggle" data-target="#navbar-collapse-1" data-toggle="collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button> <a class="navbar-brand" href="./">Cropper</a> </div> <nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation"> <ul class="nav navbar-nav navbar-right"> <li><a href="https://github.com/fengyuanchen/cropper/tree/v2.2.2/README.md">Docs</a></li> <li><a href="https://github.com/fengyuanchen/cropper">GitHub</a></li> <li><a href="http://chenfengyuan.com">About</a></li> <li><a href="http://fengyuanchen.github.io/">More</a></li> </ul> </nav> </div> </header> <!-- Jumbotron --> <div class="jumbotron docs-jumbotron"> <div class="container"> <h1>Cropper <small class="version">v2.2.2</small></h1> <p class="lead">A simple jQuery image cropping plugin.</p> <div class="docs-carbonads-container"> <div class="docs-carbonads"> <script type="text/javascript" id="_carbonads_js" src="//cdn.carbonads.com/carbon.js?zoneid=1673&serve=C6AILKT&placement=fengyuanchen" async></script> </div> </div> </div> </div> <!-- Content --> <div class="container"> <div class="row"> <div class="col-md-9"> <!-- <h3 class="page-header">Demo:</h3> --> <div class="img-container"> <img id="image" src="img/picture.jpg" alt="Picture"> </div> </div> <div class="col-md-3"> <!-- <h3 class="page-header">Preview:</h3> --> <div class="docs-preview clearfix"> <div class="img-preview preview-lg"></div> <div class="img-preview preview-md"></div> <div class="img-preview preview-sm"></div> <div class="img-preview preview-xs"></div> </div> <!-- <h3 class="page-header">Data:</h3> --> <div class="docs-data"> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataX">X</label> <input type="text" class="form-control" id="dataX" placeholder="x"> <span class="input-group-addon">px</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataY">Y</label> <input type="text" class="form-control" id="dataY" placeholder="y"> <span class="input-group-addon">px</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataWidth">Width</label> <input type="text" class="form-control" id="dataWidth" placeholder="width"> <span class="input-group-addon">px</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataHeight">Height</label> <input type="text" class="form-control" id="dataHeight" placeholder="height"> <span class="input-group-addon">px</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataRotate">Rotate</label> <input type="text" class="form-control" id="dataRotate" placeholder="rotate"> <span class="input-group-addon">deg</span> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataScaleX">ScaleX</label> <input type="text" class="form-control" id="dataScaleX" placeholder="scaleX"> </div> <div class="input-group input-group-sm"> <label class="input-group-addon" for="dataScaleY">ScaleY</label> <input type="text" class="form-control" id="dataScaleY" placeholder="scaleY"> </div> </div> </div> </div> <div class="row"> <div class="col-md-9 docs-buttons"> <!-- <h3 class="page-header">Toolbar:</h3> --> <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" title="$().cropper("setDragMode", "move")"> <span class="fa fa-arrows"></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" title="$().cropper("setDragMode", "crop")"> <span class="fa fa-crop"></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" title="$().cropper("zoom", 0.1)"> <span class="fa fa-search-plus"></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" title="$().cropper("zoom", -0.1)"> <span class="fa fa-search-minus"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="move" data-option="-10" data-second-option="0" title="Move Left"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", -10, 0)"> <span class="fa fa-arrow-left"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="10" data-second-option="0" title="Move Right"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", 10, 0)"> <span class="fa fa-arrow-right"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="-10" title="Move Up"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", 0, -10)"> <span class="fa fa-arrow-up"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="move" data-option="0" data-second-option="10" title="Move Down"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("move", 0, 10)"> <span class="fa fa-arrow-down"></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" title="$().cropper("rotate", -45)"> <span class="fa fa-rotate-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" title="$().cropper("rotate", 45)"> <span class="fa fa-rotate-right"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="scaleX" data-option="-1" title="Flip Horizontal"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("scaleX", -1)"> <span class="fa fa-arrows-h"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="scaleY" data-option="-1" title="Flip Vertical"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("scaleY", -1)"> <span class="fa fa-arrows-v"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="crop" title="Crop"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("crop")"> <span class="fa fa-check"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="clear" title="Clear"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("clear")"> <span class="fa fa-remove"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="disable" title="Disable"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("disable")"> <span class="fa fa-lock"></span> </span> </button> <button type="button" class="btn btn-primary" data-method="enable" title="Enable"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("enable")"> <span class="fa fa-unlock"></span> </span> </button> </div> <div class="btn-group"> <button type="button" class="btn btn-primary" data-method="reset" title="Reset"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("reset")"> <span class="fa fa-refresh"></span> </span> </button> <label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file"> <input type="file" class="sr-only" id="inputImage" name="file" accept="image/*"> <span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs"> <span class="fa fa-upload"></span> </span> </label> <button type="button" class="btn btn-primary" data-method="destroy" title="Destroy"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("destroy")"> <span class="fa fa-power-off"></span> </span> </button> </div> <div class="btn-group btn-group-crop"> <button type="button" class="btn btn-primary" data-method="getCroppedCanvas"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas")"> Get Cropped Canvas </span> </button> <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 160, "height": 90 }"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 160, height: 90 })"> 160×90 </span> </button> <button type="button" class="btn btn-primary" data-method="getCroppedCanvas" data-option="{ "width": 320, "height": 180 }"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCroppedCanvas", { width: 320, height: 180 })"> 320×180 </span> </button> </div> <!-- Show the cropped image in modal --> <div class="modal fade docs-cropped" id="getCroppedCanvasModal" aria-hidden="true" aria-labelledby="getCroppedCanvasTitle" role="dialog" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> <h4 class="modal-title" id="getCroppedCanvasTitle">Cropped</h4> </div> <div class="modal-body"></div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <a class="btn btn-primary" id="download" href="javascript:void(0);" download="cropped.png">Download</a> </div> </div> </div> </div><!-- /.modal --> <button type="button" class="btn btn-primary" data-method="getData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getData")"> Get Data </span> </button> <button type="button" class="btn btn-primary" data-method="setData" data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setData", data)"> Set Data </span> </button> <button type="button" class="btn btn-primary" data-method="getContainerData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getContainerData")"> Get Container Data </span> </button> <button type="button" class="btn btn-primary" data-method="getImageData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getImageData")"> Get Image Data </span> </button> <button type="button" class="btn btn-primary" data-method="getCanvasData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCanvasData")"> Get Canvas Data </span> </button> <button type="button" class="btn btn-primary" data-method="setCanvasData" data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setCanvasData", data)"> Set Canvas Data </span> </button> <button type="button" class="btn btn-primary" data-method="getCropBoxData" data-option data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCropBoxData")"> Get Crop Box Data </span> </button> <button type="button" class="btn btn-primary" data-method="setCropBoxData" data-target="#putData"> <span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setCropBoxData", data)"> Set Crop Box Data </span> </button> <button type="button" class="btn btn-primary" data-method="moveTo" data-option="0"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.moveTo(0)"> 0,0 </span> </button> <button type="button" class="btn btn-primary" data-method="zoomTo" data-option="1"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.zoomTo(1)"> 100% </span> </button> <button type="button" class="btn btn-primary" data-method="rotateTo" data-option="180"> <span class="docs-tooltip" data-toggle="tooltip" title="cropper.rotateTo(180)"> 180° </span> </button> <input type="text" class="form-control" id="putData" placeholder="Get data to here or set data with this value"> </div><!-- /.docs-buttons --> <div class="col-md-3 docs-toggles"> <!-- <h3 class="page-header">Toggles:</h3> --> <div class="btn-group btn-group-justified" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" class="sr-only" id="aspectRatio0" name="aspectRatio" value="1.7777777777777777"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 16 / 9"> 16:9 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio1" name="aspectRatio" value="1.3333333333333333"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 4 / 3"> 4:3 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio2" name="aspectRatio" value="1"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 1 / 1"> 1:1 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio3" name="aspectRatio" value="0.6666666666666666"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: 2 / 3"> 2:3 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="aspectRatio4" name="aspectRatio" value="NaN"> <span class="docs-tooltip" data-toggle="tooltip" title="aspectRatio: NaN"> Free </span> </label> </div> <div class="btn-group btn-group-justified" data-toggle="buttons"> <label class="btn btn-primary active"> <input type="radio" class="sr-only" id="viewMode0" name="viewMode" value="0" checked> <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 0"> VM0 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="viewMode1" name="viewMode" value="1"> <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 1"> VM1 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="viewMode2" name="viewMode" value="2"> <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 2"> VM2 </span> </label> <label class="btn btn-primary"> <input type="radio" class="sr-only" id="viewMode3" name="viewMode" value="3"> <span class="docs-tooltip" data-toggle="tooltip" title="View Mode 3"> VM3 </span> </label> </div> <div class="dropdown dropup docs-options"> <button type="button" class="btn btn-primary btn-block dropdown-toggle" id="toggleOptions" data-toggle="dropdown" aria-expanded="true"> Toggle Options <span class="caret"></span> </button> <ul class="dropdown-menu" aria-labelledby="toggleOptions" role="menu"> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="responsive" checked> responsive </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="restore" checked> restore </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="checkCrossOrigin" checked> checkCrossOrigin </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="checkOrientation" checked> checkOrientation </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="modal" checked> modal </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="guides" checked> guides </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="center" checked> center </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="highlight" checked> highlight </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="background" checked> background </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="autoCrop" checked> autoCrop </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="movable" checked> movable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="rotatable" checked> rotatable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="scalable" checked> scalable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="zoomable" checked> zoomable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="zoomOnTouch" checked> zoomOnTouch </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="zoomOnWheel" checked> zoomOnWheel </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="cropBoxMovable" checked> cropBoxMovable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="cropBoxResizable" checked> cropBoxResizable </label> </li> <li role="presentation"> <label class="checkbox-inline"> <input type="checkbox" name="toggleDragModeOnDblclick" checked> toggleDragModeOnDblclick </label> </li> </ul> </div><!-- /.dropdown --> <a class="btn btn-default btn-block" href="https://fengyuanchen.github.io/cropper/v1.0.0">Cropper v1.0.0</a> </div><!-- /.docs-toggles --> </div> </div> <!-- Footer --> <footer class="docs-footer"> <div class="container"> <span class="hearts"></span> <ul class="list-inline"> <li><a href="https://github.com/fengyuanchen/cropper/tree/master/examples">Examples</a></li> <li><a href="https://github.com/fengyuanchen/cropper/releases">Releases</a></li> <li><a href="https://github.com/fengyuanchen/cropper/issues">Issues</a></li> <li><a href="https://github.com/fengyuanchen/cropper/blob/master/LICENSE">License</a></li> <li><a href="https://fengyuanchen.github.io/cropper/v1.0.0/">v1.0.0</a></li> <li><a href="https://fengyuanchen.github.io/cropper/v0.7.9/">v0.7.9</a></li> </ul> </div> </footer> <!-- Scripts --> <script src="https://code.jquery.com/jquery-1.11.3.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> <script src="http://fengyuanchen.github.io/js/main.js"></script> <script src="js/cropper.min.js"></script> <script src="js/main.js"></script> </body> </html>