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.
Related
I'm building a responsive site using Zurb Foundation.
I have a PHP script which will resize and caches an image using gdlib if you append a query string with new dimensions in the URL. For example to resize an image to 300px wide:
http://www.mydomain.com/images.php?imgfile=path/to/picture1.jpg&w=300
I am also using some HTACCESS rewrite rules to make this URL pretty and avoid having a query string. So this URL gives the same result as above:
http://www.mydomain.com/img/300w/path/to/picture1.jpg
The PHP file performs some simple arithmetic to constrain by width or height, checks if the resized version is already in cache, if so outputs it, if not, resizes the images, saves it using imagejpeg and outputs it with header("Content-type: image/jpeg");
I am also using Zurb Foundation and want to use the interchange javascript like so:
<img src="http://www.mydomain.com/img/300w/path/to/picture1.jpg"
data-interchange="[http://www.mydomain.com/img/300w/path/to/picture1.jpg, (default)],
[http://www.mydomain.com/path/to/picture1.jpg, (medium)]">
However, this does not seem to work. Only the 300px is shown for both breakpoints. After much testing it's clear that only what's in the src attribute is taking. The images passing through the resize script don't work. This is true even if it should be using the medium image which is the direct path the full size image.
I tried to debug the interchange javascript, but am not that skilled in Javascript.
Any help or advice would be appreciated. Someone must be trying to using dynamically resized images with PHP using interchange.js on a responsive site.
There is no need for debugging interchange, it works pretty well.
First, have you included the foudation.js file before interchange.js (dependancy) ?
Tip for debugging: try with default/medium/small and use different images (ex: different color rectangles) to quickly notice changes.
Also, in your example, there is only one path (see below) and you're having a "default" named-query. What is the point of loading the same image twice ? You might want your default size to be in src="", and your (typically) bigger sizes thereafter ?
What interchange does is letting the src"(ex: small.jpg)" loads as usual (hence it's displayed without js enabled) and THEN loads a bigger image depending on the named-query/media-query. So perhaps you could generate all your image size on upload (with no check for size existance needed). At least, it's the way I do it with wordpress.
<img src="http://www.mydomain.com/img/default-size/300w/path/to/picture1-small.jpg"
data-interchange="[http://www.mydomain.com/img/medium-size/800w/path/to/picture1-medium-sized.jpg, (medium)],
[http://www.mydomain.com/img/large-size/1200w/path/to/picture1-large-sized.jpg, (large)]">
As I can see on the Zurb Foundation Github repo Issues there may be a problem with url containing parameters and their regular expression
I have an image that has "src" pointing to an external server, like this:
<img src="http://somewhere.com/script.php?id=1234">
The image returned is .png and it can be returned as a "X" image or "O" image.
How can I determinate if the image is X or O with javascript/jquery? Calculating md5 of the loaded image? In case how can I access to the image bytes and calculate md5?
First of all, what you're doing is probably very inefficient. Because you load the image from a dynamic PHP script, most browsers will not cache it. Furthermore, loading images from another site you do not have access to is always considered bad practice.
Anyways, the easiest way to do this is using a server side language like PHP. Then you can get the file size using either curl, fsocketopen, get_headers or fopen. By comparing this number to the known file size of the images, you know which image is loaded. Take a look at this page for an example using curl.
Alternatively, you can also do this using JavaScript (if you really must): take a look at this stackoverflow question.
You could draw the image into a canvas object and then check the pixels. E.g. an X would perhaps have a black pixel at the top-left corner while an O would have a transparent or white one (depends on the images of course).
I've recently started trying to increase my sites performance. One of the biggest obstacles I have are the number of thumbnails being displayed.
I currently use the full size image and scale it down by defining a height/width value in the img tag. This doesn't seem very efficient so my question is whats the recommended way to display thumbnails? Should I maintain a second table in the DB for thumbnails or is there a better solution?
Processing images takes its (cpu) toll, you should better avoid it where possible.
My advice:
Create the thumbnails while uploading the images into separate image files, this way you can determine when to create/resize them - and not during runtime.
If you want the links to the thumbnails in a separate database field or derive it from the original name, is entirely up to you - both ways work.
This makes additional performance boosters easier to implement too (p.e. caching).
I've implemented a similar process in a php based project, its a good way to scale out. In my case, I am creating the thumbnails nightly via cron, because system load is very low in that time.
If using an uploader to get the images on your website, have PHP resize the original image and upload both the original and a smaller thumb with some kind of prefix in the name.
This way you can easily get the images from your database and just use "filename.jpg" for your normal images and "thumb_filename.jpg" for your thumb.
Same can be done without an uploader of course but you'd have to manually create/upload the thumbnails.
For example create seperate folder in images call it thumnails (images/thumbnails) add there put files prefixed with file size for ex: "original_file_name_200X200.jpg", store on database "original_file_name" and extension "jpg" to seperate fields (name, ext) then when you need to display it select name add size prefix and add extension you get /images/thumbnails/file_200X200.jpg this way you can add later more sizes leaving original untouched.
You are looking for something like what can be found here: http://dtbaker.com.au/random-bits/php-simple-image-resize-thumbnail-generator.html (this turns all images into jpegs)
Like #martincarlin87 stated - Just need to add a check to see if it exists in the thumbnail directory and either send the information or create and send it through. This can be turned into a function as well.
I use phpTumb to create thumbnails on the fly.
You could also use it while uploading a picture to change its dimesions.
It has many other features. Check it out.
you could use a program like imagemagick to make proper thumbnails.
If its your personal site you could batch resize (theres a powertool for xp that does this) and then upload to a 200 directory and change your code. Obviously this relies on you uploading the images.
imagemagick will need to be installed on the server but will resize and allow you to play with the size of the images
How to include an image inside another image in PHP? I want to do it like in twitterbackgrounds.com personalized backgroud. there is one main image and we can upload four personal images after that it will show as watermark of the main image.
I never used GD by myself, but look at the example in the manual, wich is about "Using imagecopymerge() to create a translucent watermark".
Well, there are several possibilies to do that. The one that pops into my mind is to use a php page where you can upload all files needed for this. After submission you can use imagemagick to create the new image with watermarks and display it on another webpage or store it to a database.
Here is a good tutorial on how to use imagemagick to create the watermarks in another image.
you may use imagemagick as commandline command from php or use it as a server application on an own server
phpThumb has a watermark feature, if you're looking for something full-featured and ready-made..
On my site I have given an option to user to choose thier profile image
Type link of an image
Image is a url link, and first I want it to resize to 400x300 (image's original size doesn't matter), and then display it on my web page.
Something like below:
<img src="http://mywebsite.com/resize.php?image=http://someotherurl.com/upload/image2.jpg&width=400&height=300" />
anyone knows this kind of script, please tell me how to solve this issue.
Thanks
A recent post:
https://stackoverflow.com/questions/1302464/php-image-resize-my-upload-script
has some code and comments that may give you some pointers. Otherwise may I suggest
http://www.white-hat-web-design.co.uk/articles/php-image-resizing.php.
Good luck!
If you have the GD extenstion, you can use imagecopyresampled (the documentation also features some examples). However, if the image to be resized is large and there is a low memory limit on your server, you may run out of memory.
I don't have ready to use source code, but it should look like:
Load image pointed by image parameter into object of ImageMagick (or other graphics library).
Resize it.
Send content to output stream.
Optionally you could:
Check if loaded file is image (plus other validation checks).
Save resized image on disk and serve it from disk next time (if you do it often).
Check docs of you favorite graphics library used in PHP for details.
Good luck!
Use the Class called - class.upload.php.
Find it at: PHP Classes
We use it at all times in many of our work.
The name is deceptive but actually it is an uploader as well as image processor. It has a very big list of functionality for resizing images, adding text to images, converting formats, etc. etc.
There is sample code which shows how to read an Image from server, modify it and finally send it directly to browser without having to create a temp file on server.
HTH