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
Related
I was required to develop a mobile application of the existing system, and I have recently learnt about Jquery Mobile, and I was fascinated that I can use php with Jquery Mobile which will make my task more simple. My recent problem is with the uploading the image from the mobile devices memory. Is it possible to upload images and store it in a BLOB field in a database table? If so is done the 'normal' php way or is there another way of doing it in Jquery Mobile.
Thank you
If you want to use file uploads with jQuery Mobile you have to do two
things:
1) Turn off Ajax navigation using data-ajax="false" on your
form definition because you can't upload files using Ajax.
2) Specify
the appropriate encoding type of enctype="multipart/form-data" on your
form.
Do just normal way of file uploading in HTML. Follow for example http://www.w3schools.com/php/php_file_upload.asp
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.
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?
I am using class.upload.php to handle an image upload from a form that submits employee details to a MySQL database. class.upload.php does EXACTLY what I want it to do, resize the image and rename it - what I am now trying to accomplish is to upload via Ajax after the user selects the file and then display it in the form while they continue entering details. How would this best be accomplished with jQuery?
I have used Uploadify to serve this purpose on several websites. It works quite well once you get the hang of it.
Does anybody know how to place an image in the webpage, but both position and clipping (maybe also resizing) are interactively done by user? I need it for my registration page, I've done some clipping and resizing from css and javascript, and it's not really solve the problem. If it's can be done by php, it will be perfect.
Here is a brief summary:
Let the user browse for and upload a
photo.
Validate the photo is of correct type
and dimensions using PHP's image
functions.
Show the user the photo in the
browser, along with a draggable DIV
that they can resize and move. This
is the cropping area.
When they click "Next", you transmit
the x,y,width,height of the DIV to
the server either by AJAX or simply
as hidden fields in a form.
Again, use the PHP image functions to
crop the image, and then resize it.
Save it to a permanent location.
Post a comment for further specific answers.
No matter what you're going to need to use either JavaScript or Flash to maintain intractability for a clientside resize of you image.
The following tutorial shows you how to use jQuery's simplified AJAX and PHP to upload an image to a temporary location, resize it, and save the resized copy where you desire.
Hope it helps!
http://www.webmotionuk.co.uk/jquery-image-upload-and-crop-for-php/
Try this class
http://www.verot.net/php_class_upload_samples.htm
All images that are being uploaded by user can be edited in anyway using php