I am trying to build a system that allows a user to select an image from their own computer, and crop it using the jCrop tool from jQuery. My question is can I show the image the user has selected from their system without uploading it to a system, I dont really want to do two uploads, unless I can do the first upload silently? Any help would be great.
Thank you.
You don't have to upload twice. Just upload the image at first time
Use jCrop and send image Thumbnail's coordinates(x,y), width and height.
Resize Image according to them
AFAIK, not using JavaScript and HTML (4) at the moment.
Flash can do image processing before upload - SWFUpload for example can resize images before uploading (doesn't support cropping though), but I don't know an Open Source implementation of a Cropping tool in Flash.
It will probably also be possible using HTML 5.
However, I don't see how you would need two uploads to do this? Isn't it 1. Upload 2. Show with Cropper 3. send Crop info to PHP script that processes the uploaded file?
Related
I'm able to resize images (client side) using this neat library.
I'm also able to upload images directly from the browser to Cloudinary, using this code:
<?php echo cl_image_upload_tag('image_id', array("callback" => $cors_location)); ?>
This basically creates an input field (type=file), and when you click on "browse" and you select a file, the uploading automatically starts.
My question: how to make these two things work together? I would need to use the cropped image to upload to Cloudinary, but I have no idea where to start... I've tried mimicking the "browse" thing with jQuery, but that didn't work out...
Any help is much appreciated!
Cloudinary supports uploading from DATA URLs (Base 64). For more information:
http://support.cloudinary.com/entries/25785301-How-to-upload-Base64-data-to-Cloudinary-using-Post-Request
I want from user to upload an image of any size for (jpg,png,gif) format. After uploading the image I want him to crop the image (client side) using jquery and save that cropped image (php) to application folder.
Please tell me the feasible solution to make this functionality working fine.
ImageMagick is used for croping images:
http://www.sitepoint.com/crop-and-resize-images-with-imagemagick/
For using ajax:
http://www.sanwebe.com/2012/05/ajax-image-upload-and-resize-with-jquery-and-php
Given that you already have the PHP code to crop, use one of this plugins to allow the user define how she wants to crop the image and provide the data you need:
Guillotine: Very lightweight plugin that allows to crop, zoom and rotate images with touch support and it's responsive (demo).
Jcrop: Allows free selection cropping (demo).
It is simple image crop using jquery and php using cropbox.js
Please watch the following video
Simple image crop
I'm looking for some jQuery plugin or smth similar.
For example, I need to crop a photo on website and to save the result on server.
I know that it is better to do it in Adobe Flash, but I really need to do in using JS.
Very few browsers support selecting an image with Javascript and manipulating it without first uploading it to a server. Instead, you'll need to:
Allow user to upload image to server
When upload is complete, resize the image (with PHP) to a manageable size for the browser for preview
Show the resized preview image in the browser in something like JCrop
After the user chooses the crop area, have them click "Save"
On Save, pass the coordinates of the cropped area to the server/PHP to have it crop the original image. You'll have to scale the coordinates for the preview to coordinates for the original image.
Save the new image to disk/S3/whatever with PHP
I managed to do this without ever using my server or having the image touch my server by using http://transloadit.com/. I use transloadit's Javascript upload form to upload to their server storage (S3) and use a template that saves the original and resizes for preview. Both the original and preview are stored in transloadit's temporary S3 account, not mine. I then use JCrop to show the user the preview. Once they select the crop area I then tell transloadit to crop the original photo but with my crop coordinates (scaled from the preview image to fit the original) using a template that also makes several thumbnail sizes. Transloadit then saves all the images to my S3 account and tells me the URL where it saved it.
Check out jCrop. It's perfect for this stuff.
You are looking for JCrop
Here are some demos.
Here is an example implementing in on PHP.
I am using a jQuery plugin http://odyniec.net/projects/imgareaselect/ that allows cropping of an image.
I have search high and low for a tutorial that allows me to over write the file on the server with the cropped version...but found nothing of use.
I am using the basic integration of the plugin inside Facebox. This is working fine.
I have a button on the page which says 'Save', when that is clicked I would like to store the new image (cropped) on the server.
Any suggestions or need further information?
Check out this awesome tutorial
I use Jcrop for my projects works great!
http://deepliquid.com/content/Jcrop.html
http://deepliquid.com/projects/Jcrop/demos.php?demo=live_crop <--
Have you taken a look at the links at the very bottom of the plugin page? There are some useful links including this one. It should help you get started with the php side of things
Turned out the that image I was uploading was bigger than the area size of the cropping tool.
Image was 1024x768 however I resized the image to fit within 500x500 overlay.
I will need to resize and save new sized image during the upload.
Thanks for all your suggestions.
Any recommendations for how to resize & crop images in a PHP web app? Ideally will integrate into the UI to allow user to upload, preview, then optionally resize and crop.
Thanks,
Graham
Here is a jquery cropping plug-in.
http://deepliquid.com/content/Jcrop.html
and here's a php code to crop an image (you'll find code to upload an image there as well)...
it even provides for a rough gui to select the cropped area by clicking on the image.
Here's a PHP + JQuery script that looks promising
http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop-v11/