I've never messed with cropping images before upload until today. I have a basic understanding of resizing them with PHP but not before upload. My question is if how I get them to crop with jcrop is by sending the x and y coordinates to a php script and then crop the image based off that? Sorry if this is confusing, I can't find much information on the internet that helps with this. Any help would be great.
I decided to go with another cropping program that worked better for my application.
I'm trying to make a simple app which gives a user a standard background/template image onto which they can place their logo/brand/whatever. I've had a look at a few jQuery plugins which allows the user to upload and crop an image, and most of them seem to work by posting the x and y coords, and the width and height, to the server.
I'm able to then use imagecopyresampled() to merge the image with the background image, but (a) the user's image seems to end up really skewed, even when I hard-code dimensions that I know should work, and (b) I need to position the uploaded image pretty much dead-center -- what's the best way to achieve this?
Any help? This is my first time using GD. I'll add my own code if required, but I'm messing with the different GD functions, so I've butchered the one I had before. Will reproduce it.
Thanks
I am working on a site at the moment, that requires the admins of the site to be able to upload pretty much any size of image, I then need to find a way to get the image down to the size required for the front end of the end the site, all this needs to be done without know what size of image the user is uploading, but the image always needs to scale to 209x293 without looking awful.
Is this even possible?
You should argue with your client, to forget that rule(accept ANY image), and accept rather, only images in that proportion, or better, you can use a tool to crop the image, forcing the user to crop an image in your needed resolution.
Jcrop is a library in Jquery which can help you a lot if you want to create that cropping feature.
Don't know your precise requirements, but since you tagged it with CodeIgniter, you can check out the Image Manipulation Class which has everything you need to do the job.
Not knowing the size of images before uploading is, you know, quite a common problem...Just be careful of the MAX SIZE, which is set in your php.ini.
You might find useful also the page on file uploading right in php's manual.
So this will no doubt come as a stupid question from an ignorant person, but I was wondering if there is any easy way out there of resizing an image BEFORE a user downloads it?
I am pulling in images from a 3rd party database, which I have no control over. I'm also not allowed to cache anything from it under their T&C.
They give a few different sizes for each image. But I am ending up resizing half of them on my pages with CSS.
So I was wondering if maybe using php or javascript or something! (I really have no clue do I), I could resize these images before my users waste time downloading much bigger versions.
The only reason I ask really, is that I know the Manchester United website kind of does it (with the aid of a piece of Adobe stuff I think), so I thought that maybe there might be something out there that anyone could use?
http://www.manutd.com/en/News-And-Features/Football-News/2011/May/Sir-Alex-Blackburn-reaction.aspx
http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?h=179&la=ar-SA&w=480&rgn=0,78,1200,524
-> 18kb compared to 160kb -> http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx
(obviously I don't want the cropping technique)
If the images are coming from a server you don't control, the short answer is NO. You can't resize an image until you've downloaded it. Without caching a resized version, you are at the mercy of the 3rd party server. Unless you use a server side proxy program, yet this is probably more trouble than it is worth.
Yet as I've pointed out in the comments, http://www.manutd.com will resize their images for you. In the link h=height, w=width and rgn=region (left,top,right,bottom)
http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?h=80&la=ar-SA&w=120&rgn=0,0,1200,800
You only need the h and the w. If your h and w don't match the aspect of the image it will crop rather than skew. look at both of these. The image is 1200x800 aspect ratio 3x2
w=240, h=160 3x2 (whole image)
http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?w=240&h=160
w=160, h=160 1x1 (cropped)
http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?w=160&h=160
After I've played with it more, you can get by with just the width(w), and I'm assuming this also applies to just the height. (EDIT: yes it does)
Whole image, 480px wide...
http://www.manutd.com/~/media/64B766EE4A37488AA65DC7B08E5ABC1B.ashx?w=480
MORE EDITING: Understand, any time you see a '?' in a url, you are requesting a page from a program, and the stuff after the '?' are parameters for the program, and '&' seperates the parameters. The server at manutd.com is using a program to resize their images, just like a proxy program would resize images for you. If you did resort to a proxy program, if it was a decent one, it would take a link like http://YourServer.host/proxyProgram.php?img=imageHost.org/imageName.jpg&w=240&h=160 given a link such as that there are all sorts of server side solutions to resize the image.
Yet without a cache there is the possibility that you will resize the same image many times, and just the thought of that turns me off.
I'm gonna quit editing now!
Have fun!
Skip
Try using ImageMagick for PHP. It allows you to resize and modify images server-side. There are some examples here
Just off the top of my head, here's a pretty ugly way to get it done:
Create a PHP page that takes all of your requests. So instead of doing this...
<img src="http://other.domain/img.jpg" />
Do this:
<img src="http://your.domain/images.php?name=img.jpg" />
Then have your PHP page grab the image from the 3rd party site, and recreate it at whatever size you need:
$newe = imagecreatetruecolor($width, $height);
$old = imagecreatefromjpeg($fullpath);
$oldSizes = getimagesize($fullpath);
imagecopyresampled($newe, $old, 0, 0, 0, 0, $width, $height, imagesx($old), imagesy($old));
header('Content-type: image/jpeg');
echo $newe;
Some stuff that might trip this up:
If the T&C doesn't allow caching of images, they might not allow you to access their images with server-side code.
You'll have to adjust some of the code if you're doing other image types (gif, png)
This has to be done on the server. The technique used depends on what you're using on your server. If it's .NET, there is built-in functionality to handle resizing.
# Taze well server side, but he gets the images from another server and it seems you have not read it what he is doing and what he is allowed to do.
theoretically you could cache it (what you are not allowed to) on your own server, resize it with gdlib or imagemagick and give it to the user and then delete the copy from the server
but thats against the rules of the 3rd party
I have been attempting to use a mashup of jquery plugins found on this website. as far as i can tell this is a pretty good peice of code, just have a couple of issues.
my main issue is that if i attempt to upload a file that is larger than the max file size in firefox it sends a javascript alert saying "error" which it is supposed to do but then crashes firefox and i have to physically end the process.
my next issue is that when you do upload an image and specify the crop target it doesnt actually seem to crop it rather just resize the the image to fit the samll region.
I would happily plough through the code myself but i know very little about javascript and next to nothing on jQuery, i do however know a fair bit about php so that side of things shouldnt be too bad.
hope someone can help,
Nate.
You can't resize the image in Javascript - i imagine all it does is change the image tag. You need to send the resize coordinates/height/width to your backend and then resize it there.