I'm working on a website that has many tiled images using JQuery's Masonry plugin. The tiles are all uniform in size, but the images contained within them can be a number of sizes.
I was wondering if there's a good recommendation for a PHP plugin / script that can take an incoming image of any size, and do whatever is required to fit in a certain sized box (have automatically resize, crop, insert black space, etc.)
EDIT:
Thanks for the Php options. is there anything in the JQuery realm too?
This script would fit your need as well :
http://www.phpcodester.com/2011/01/php-function-to-resize-image-to-fit-in-a-standard-box-without-distortion/
If you need to modify something, php's image functions are always named imagesomething($resource,x,y,etc.)
Hope this helps.
You should have a look at TimThumb: http://www.binarymoon.co.uk/projects/timthumb/
Related
I'm creating a web app that allows users to specify an image url to display an image along with their submission.
To avoid some potentially large images and odd sizes, i'd like to use PHP to limit/resize the image before it gets output to the browser (I know i could use max-width in CSS but this is unnecessary downloading)
Is this possible?
PHP has a library named GD. It's fairly easy to check the size of an image with the getimagesize() function.
You can find the complete code for it with 2 module/extensions: http://www.fliquidstudios.com/2009/05/07/resizing-images-in-php-with-gd-and-imagick/
a comparison of them can be found here: http://dreamfall.blogspot.com/2008/02/php-benchmarks-gd-vs-imagemagick.html which may be of use if you want optimize features.
I have a sort of a canvas on my site, (not canvas though for the need of support in IE) where images are loaded to and modified.
At the end of the process I'd like to take all the files used in the canvas and connect them into a (bigger) jpg.
My thoughts were to collect all the relative positions of the images and use it to reposition them on the new file.
I should add as well that one of the files is a background image.
layers should not count more than lets say 4 including the background.
on top of that i needed to jpg-ize a text layer as well but for that I have a php script, if anyone has an efficient way to do it I'll be glad to see it as well.
Look at GD or ImageMagic PHP extensions. Both allow to do that.
Here is an example of how to do image overlays in imagemagick. You can specify the scaling and position of the overlay in the convert parameters.
I'm working on a web application that need to allow the user to drag and drop as well as rotate an image.
Drag and drop is solved with the jQuery UI Draggable.
But how am I suppose to rotate an image on the page? My images are mostly one colored rectangles. I used divs to draw them on the page but how to rotate them?
It is okay if they only rotate 22, 5-45-67, 5-90 degrees
So I think of 3 solutions
Using Canvas
Problem: IE support
Using divs
Problem: it also needs canvas to rotate
PHP GD
This solution is the only hope that left.
How it might work: The application will prerender (22,5*x) rotated versions of original image. So they will be ready whenever user wants to rotate an image.
Please help. Any suggestions appreciated
One possible solution is to use a JavaScript graphic vector library that can use automatically an alternative to canvas when used on IE.
Raphael is a really good one, give it a try:
http://raphaeljs.com/
You can find more informations about rotation with raphael here:
How do I rotate a div with Raphael.js?
take a look:
http://www.dyn-web.com/code/rotate_images/
Rotate image clockwise or anticlockwise inside a div using javascript
The server side method sounds a bit wasteful (all versions of the image need to be downloaded), dare I say you should try using Flash for a cross-browser and client side solution.
You cannot manipulate image directly with Javascript other than resizing them (and this is technivally done with CSS, not Javascript...). The best solution would be to use Raphaël; it will allow you to ratate, but also drag and drop, and it is also built using JQuery.
Of course you could alternately use different image states and use them as "sprites" for your rotated rectangles, however you will not play extensibility there. (GD is a bad design, don't use that.)
I run a site with lots of small images (www.iconfinder.com) and would like to develop a feature that can compare and recognize images. A user should be able to upload an image (icon) and then the site will respond with information about the image if it's in the database.
What is the approach to finding similar (or the same image). I know I can compare md5 of the two images, but I also want be able to find matches if the are scaled.
This is a good start if you are interested in looking at doing it in PHP:
http://www.intelliot.com/blog/2008/03/sorted-directory-listing-image-resizing-comparison-and-similarity-in-php/
There probably aren't a lot of languages LESS suited to this task than PHP. You should really look for an image comparison library with a C compatible API and figure out how to glue that into your PHP application.
Identical images can be checked with an md5sum, but detecting if somebody uploads a scaled image, which displays the same thing as the other is very hard. This requires digital image processing.
An approach is to scale down all images to a certain width (say 100px). Then check a few coordinates for the color. If another image matches a big part (say 80%), it might be the same image.
But if the image is lighter... this won't work.
I am working on a website in which the client wishes to have users upload background images to a printable design, crop to size, add text. Do this to multiple pages then generate a pdf of the 'book'
I am running into the following issues/questions and just need to see where I can start
Are there any PHP developer packages that can do something similar. I have seen jquery crop tools but something also for adding text to an image?
How would I keep the resolution up? If the final cropped with text image needs to be 150dpi, when cropping I am guessing I would have them working on a 72dpi image, then somehow apply the crop and changes to the large image?
If the resolution issue wasn't a big deal I would go about it this way:
Simple image upload
Use jquery to crop photo to correct dimensions
Mess around with gdlibrary and imagettftext() to get the text onto an image (page)
Use something like FPDF to create a pdf from each 'page'
Is this the right way to go about it and any thoughts on the resolution issue. Thank you for any help!
Your primary tool should be ImageMagick. ImageMagick can do the cropping, resizing, scaling, overlay text or graphics, combining images, and apply special effects. A big advantage of using a separate tool instead of PHP's image manipulation tools is that you can do the same transforms in batch through other mechanisms, or even hand the work over to another server to keep the website more responsive. And if you do want to integrate it tightly into the website, you can use the MagickWand For PHP interface.
Cropping does not change DPI, only the dimensions of the image. Scaling, on the other hand, changed both.
You should take a look at Gallery, a GPLed program with some of the functionality you're looking for, and written in PHP.
domPDF is a good tool for converting HTML to a PDF. this way you can use the image they upload as a background image, then put the text over it in any standard HTML tag.
As far as the resolution/dpi issue goes, I'm not sure if there is much you can do outside of changing the size of the image. I would recommend looking into This PHP Library, which has a lot of good tools for manipulating images.
I think with a combination of these tools, you'll be able to create HTML that can make a PDF that's fit to print, and use that.