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
Related
I would like to implement multiple image upload with drag and drop functionality, but can't find anything online to help with my specific case.
The thing is I would like to resize images on upload to 16:9 ratio, and show thumbnails as they get uploaded. Also I am using a label that I wrote some css to style it as a nice upload button and I trigger a hidden file upload input with that label.
<label for="image">Upload image</label>
<input type="file" name="images[]" id="image">
I figured I need to use jquery ajax on each "Upload image" button click to send image(s) to an upload script where I resize the image(s), upload (them) to server and return image(s) path to jquery as a response so I can show a thumbnail of the resized image(s). Same thing goes for drag and drop functionality, I listen for a 'drop' and send the dropped images to upload script.
Everything up until now I can get working without a problem, but the thing is I don't want to actually upload images to the server until user clicks a button to submit form once he's done with all the inputs. So my question is can I manipulate images in this way and instead of uploading to a server store them somewhere local until that final submit button is clicked?
I thought of a solution where I upload images to a "temp" folder on my server using ajax and then on form submit move them to "images" folder, and then set up cron to empty that folder once a day, but I would like to avoid that because a user can start filling out the form, upload some images, and then just before he clicks form submit cron steps in and deletes all of the images in "temp" folder and his images are lost.
I ended up creating a new file input via jquery each time a file is selected (on file input change), removing id from all previous file inputs and setting id="image" for that new one I create in order for it to still work when the label is clicked that attaches to it.
To show the preview thumbnail I use FileReader and set the uploaded image as a background to thumbnail div that I set up to be responsive 16:9 scale (padding-bottom: 56.25%). Actual image cropping will then happen on server once form is submitted.
I have a user profile page and want to allow the user to do the following:
Click 'CHANGE AVATAR'
Select new pic and upload it
Pic shows in lightbox (of some sort)
Allow the user to use jcrop to crop image
Save cropped image in user folder
I can achieve the upload part and know how to use php to save a file to user folder and add filename to the users row in mysql table for avatar.
I can find no tutorials to show me how to open the image in a lightbox ad enable the user to edit with jcrop.
I figure I will have to:
post the uploaded filename to a php file (ajax?)
include the php file in an iframe to use with fancybox (or alternative)
echo the uploaded image and initialize jcrop within the php file for the shown image
Save the image with random filename using php
I am stuck with points 2-4 on the last list. Please help...
Can nobody seriously help me with this??
I have a form with 2 file input which the user will select images to upload.
On submit when the images are uploaded, I first resize the image and merge it with another image using gd and this works fine.
What I want to do before the form is submitted, using Ajax on change of the file input, get the image, processes it on the server using gd (but not upload) and show the user the final result in a ui dialog for them to approve or not.
For reasons beyond my control I cannot use html5. I know you can't post files using Ajax and need to use jquery-iframe-transport or jquery-file-upload or some other plug-in like that.
What is recommended and how do I return the final image to display in the dialog, and if the user then click disapprove, how do I clear the file input field?
Thanks
Take a look at this: http://www.9lessons.info/2011/08/ajax-image-upload-without-refreshing.html
The above tutorial will show you how to do image upload using JQuery.
You can easily change the php file that handles the upload, show the image to the user, if they clicked disapprove, then simply remove the file from the server and start over.
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 creating a multi-layered image editor using AJAX to send calls to a PHP script, then using a GD library to process the changes, save the new image and send the new image path back to the browser for AJAX to replace old with new.
This example, when you move a layer it seamlessly moves the layer without a single flicker of the image. This example uses a dll file to serve the image, I want to be able to achieve the same thing in PHP / JS.
Idea 1
I thought about applying a z-index to the current image and load the new image below it, once it's loaded, hide the old image.
Idea 2
Set the image path to a php script which outputs the raw data of the compiled image direct to the browser.
if you want to replace the image "without a single flicker", just preload the image
(load the image to a hidden img element or a Image javascript object and then show it on an onload callback)