How to add the facility "resize image before upload" in SWF Overlay Demo.
http://demo.swfupload.org/v250beta3/resizedemo/index.php
http://demo.swfupload.org/v220/overlaydemo/index.php
I want this resizing facility(1st link) in overlay demo(2nd). Could you please help?
is it possible to get "image resizing before upload" in the second link ?
They way I've done it is I let the user upload the image to a temporary location using this ajax flash uploader... http://valums.com/ajax-upload/
The flash uploads to a php script that creates 2 temporary version, the first one a resized version and the second the original. Then I return a json response with the path to the temporary files.
Then I load the resized version amd use this cropping http://deepliquid.com/content/Jcrop.html with a ratio constraint to get the portion of the picture to capture.
To complete the process the user submits the selected coordinates and the path to the temporary images to another scirpt which then takes the coordinates maps them to the original image and extract the portion of the image and resize it to the desired size using GD.
Related
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.
How can I upload an image in a registration form with image preview and cropping tool using PHP yii framework?
I have a user registration form in my yii framework and want to include an image upload for the user image. I want that the image in uploaded and directly displayed in the form after the upload was successful. After that I want to resize and crop the image and when the create user form is submitted the image should be saved and the user record should contain the url to the image in order to display it later.
How can I set a fixed size for the image to be stored? I.e., when I want to have the image in width 200px x height 300px for example.
For live preview before updating you can use html5 File API.
I advice you to look in these links:
file-api-example
https://developer.mozilla.org/en/Using_files_from_web_applications
For cropping images on the server side, please use following yii extension:
http://www.yiiframework.com/extension/image/
You can also let the user crop image on the client side. You can define the fixed aspect ratio and let the select part of the image. I personally use Jcrop javascript library.
You want to have the image to be 200px x 300px. AspectRadio is 0.67 in this case. You define aspectRatio in Jcrop:
jcr = $.Jcrop('#imageDisplay');
jcr.setOptions({
trackDocument: true,
aspectRatio: 0.74,
Since your aspect ratio is fixed, you only have to resize the image to 200px x 300px using the mentioned extension.
I'm wondering if this is possible: user uploads a picture which is then presented to him in the browser. The image is placed inside a div that has predefined image as background. User can drag and drop his uploaded image inside the boundaries of this div.
It would be something along the lines of uploading a pic of yourself and then positioning it against a background of a tropical beach. User then clicks ok and has the option to download the image.
I have the upload and JS drag & drop covered. I'm just wondering: is it the possible to create a new image on the server that exists of the back - and foreground image? So basically an image would have to be created from the contents of the specified DIV.
Yes it is possible using the functions of GD, you may also want to check out imageMagick
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?