Test run the Ultra image Cropper. For this in the UIC area, drop an image.The drop area works well if you are an old school.
<div class="ucropper"
cropper-ratio="16:9"
cropper-url="upload.php"
cropper-msg="Drop files here / click to upload.">
<input type="hidden" name="file"/>
</div>Does your server have any images that requires cropping? By placing an imgin the UIC element, you can crop it easily.
Initially, post the content using AJAX in the first demo and use old form to post the cropped image.
The required attribute present in the input file tag prevents the form submission.
<div class="ucropper"
cropper-ratio="2:3"
cropper-url="upload.php"
cropper-size="640,640">
<input type="hidden" name="file"/>
</div>Test run the Ultra image Cropper. For this in the UIC area, drop an image.The drop area works well if you are an old school.
<div class="ucropper"
cropper-ratio="1:1"
cropper-type="avatar"
cropper-url="upload.php"
cropper-msg="Drop your avatar here">
<input type="hidden" name="file"/>
</div>HTML is used to setup the UIC. The UIC configuration options are available in the attribute overview available.
cropper-ratio
What ratio should the crop be in, default ratios are all supported "16:10", "16:9", "5:3", "5:4", "4:3", "3:2" and "1:1"
Custom ratios can also be set, Cropper will calculate the correct container size automatically. e.g. "14:2"
Set to "free" to allow the user to pick their own crop size.
Set the value to "input" to force the input image ratio.
The default value is "free"
<div class="ucropper"
cropper-ratio="1:1"/>
<img src="../assets/img/hiring.jpg" alt=""/>
</div>
cropper-size
Cropper box will change accordingly
Determine the target size of the resulting image.
For example "320,320" will scale down the image to fit within those dimensions. The aspect ratio of the image will be respected.
By default Slim does not resize the output image.
<div class="ucropper"
cropper-size="640:640"
cropper-service="api.php"/>
<input type="file" name="cropper[]"/>
</div>
cropper-min-size
Determine minimum size of the crop in pixels
For example "900,400" will make sure the cropped image is at least 900 pixels by 400 pixels big.
If the minimum width defined is bigger than the height of the image the rotation button will only rotate the image by 180 degrees instead of 90.
By default Slims minimum size is 100 by 100 pixels this prevents the controls of the cropper from overlapping.
<div class="ucropper"
cropper-min-size="900,400"
cropper-service="api.php"/>
<input type="file" name="cropper[]"/>
</div>
cropper-upload-method
The default request method used to asynchronously send data to the server.
"POST"
data-force-type
Force output type, set to either "png", or "jpg" and Slim will replace the extension and save file in the given format.
By default Slim tries to detect the file type, if it cannot be determined it falls back to "png".
Default is "false"
cropper-download
When set to "true" shows a button to download the cropped image.
Default is "false"
<div class="ucropper"
cropper-download="true" />
</div>
cropper-delete
When set to "true" shows a button to delete the cropped image.
Default is "false"
cropper-rotate-button
When set to "false" will disable the rotation button in the image editor popup.
Default is "true"
cropper-edit
When set to "false" will disable the rotation button in the image editor popup.
Default is "true"
cropper-url
Default is "upload.php"
cropper-type
We set to "avatar" for cropper-type
Default is "Null"
cropper-msg
We set to "avatar" for cropper-type
Default is "Null"
cropper-flip-button
When set to "false" will disable the button in the image editor popup.
Default is "true"
cropper-image-name
Default is "cropped.jpg"
cropper-drag-mode
Default is "crop/move"
HTML Tag API
<div class="ucropper" />
<input type="hidden" name="file"/>
</div>
Include css Libararies
<link href="assets/css/bootstrap.min.css" />
<link href="assets/css/ucropper.min.css" />
<link href="assets/css/style.css" />
Include JS Libraries
<script href="assets/js/jquery.min.js" /></script>
<script href="assets/js/bootstrap.min.js" /></script>
<script href="assets/js/ucropper.min.css" /></script>
