I'm a beginner at this. And I tried to search on the internet about this. And almost all that I found requires frameworks and libraries. And I don't really know how to use frameworks.
Can you recommend something that could help me go about image manipulation in php. Something for beginners like me.
All I want to do for now is to output a thumbnail of 700 x 468 image. Without having the need to save the resized image.
$width=700;
$height=468;
$image=imagecreatefromstring(file_get_contents($file));
$thumb=imagecreatetruecolor($width,$height);
imagecopyresampled($thumb,$image,0,0,0,0,$width/4,$height/4,$width,$height);
header('Content-Type: image/png');
imagepng($thumb);
This creates a thumbnail that's 1/4 the size of the original, without destroying image proportions. Although you don't need to save any thumbnail image, image manipulation gobbles up huge amounts of RAM. Make sure you always have enough.
It's usually a good practice to save the thumbnail on the disk, for caching purpose, but if you really don't want it, just generate the thumbnail on the fly as explained by stillstanding, with the HTML img pointing to a php script like this:
<img src="resizeimg.php?img=original.jpg" width="700px" height="468px"/>
Additionnaly, you can make it invisible, with a bit of URL rewriting like this:
HTML
<img src="thumbnail-original.jpg" width="700px" height="468px"/>
.htaccess
RewriteRule ^thumbnail-(.*)$ resizeimg.php?img=$1 [L]
Related
I'm considering writing my own image file format for my site. Why? Well, the site is going to include comics that only subscribers can read, and I want to make it a little difficult for someone to drag and drop the image and spread it around. Is there a better way of doing this, or is this a way I should investigate further? If so, how would one go about doing this?
I've read there could be a way in PHP with doing this, but unsure how to go about it if this is a good solution.
It's impossible to completely prevent your images from being stolen, but you can make the process harder.
The following method will make the real image unreachable unless checked from the source. You can use the original image as a background & put a transparent-blank file over it that matches the size of the real image.
Example:
<div id="image1" style="background-image: url(originalImage.jpg);">
<img src="blank.gif" height="250px" width="300px">
</div>
So, when the image is right-clicked, it will be the blank.gif that can be reached.
View this post for some other ideas.
An alternative solution would be to use PHP's GD Library. Using this method, you can add a watermark on all your images.
Hope this helps!
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 site I am working on and the images take forever to load, they are coming from the server, and are being uploaded using php upload, the images being uploaded ar 1212x2564 or similar
here is the html img attribute I am using
<img src="upload/<?php echo $array['image'] ?>" width="500" />
My site is http://www.willruppelglass.com/
why is it taking forever for my images to load?
The images are enormous, and are being downloaded at their original resolution. Giving the image a specific width either as an HTML parameter or using CSS will only stretch/shrink the original image, it will not change the resolution or file size for you.
To speed up the loading, you should create thumbnail versions of your images, whose actual resolution is 500px.
If you let us know what OS you're using, we can recommend tools for creating the thumbnails.
Those images are huge, they need to be drastically reduced in size if you expect them to load in a reasonable amount of time.
You can use WebResizer to help you out with this for free or use your favorite graphics editing program.
if you a new to these thing sometimes it is worth using something like wordpress as this contains automatic image resizing. You can define the size of images you want to use in certain areas and wp will create an image of the correct site even if you upload the original full size image. Obviously this require some configuration but it might easier than trying to build an image resizer from scratch using php.
You need to use server-side image processing to scale them down to an acceptable size for the web.
http://www.zeronese.net/knowledge-base/articles/article-1060.html
Your images are way too big. I mean, they aren't just a little big, they are way too big. I never recommend anything bigger than 1600px max.
I am looking for a decent image cropping solution, ideally a script that would do the following :
Allow to upload an image (ideally via ajax), crop the image using some jQuery like cropping tool and then save the 'new' cropped image while retaining the image untouched.
Is there anything people could recommend?
Use Pixastic for client-side image processing.
Edit
It sounds like you might be looking for an image crop GUI for users, rather than a way to programmatically crop images (as I read your question originally). In that case, there are a variety of jQuery plugins that provide this; jrac seems to be a reasonably up-to-date one.
you can check here it is good tool
http://deepliquid.com/content/Jcrop_Download.html
I am writing an PHP script to upload image files to the server and I have a few questions?
Is there a way to decrease the size of images in terms of kilobytes?
When I am using those files what is the best practice to embed those images into page? I mean do I always have to download the whole page?
Lastly, When resizing the pages(like 250X250 pixels) what is the pratice in order not to face the resolution problems?
I hope my questions are not too general. Thanks in advance!
Take a look at this http://www.webmotionuk.co.uk/php-jquery-image-upload-and-crop/ - There are many other free tools out there to convert images after the upload. The resolution shouldn't be an issue that is usually a problem when you give a size to an image object in html that is huge and not proportioned.
Here is another php resizer I have used this code before to do what you are requesting.
Is there a way to decrease the size of
images in terms of kilobytes?
You'll need to create a new image, based on the one you received.
You should first take a look at the PHP GD functions.
For instance: http://ch2.php.net/manual/en/function.imagecreatefromjpeg.php
When I am using those files what is
the best practice to embed those
images into page? I mean do I always
have to download the whole page?
What do you mean by embedding?
If you are talking about decreasing the size of the image before is uploaded, you can't with PHP, unless you use something like HTML5/Flash to pre-process the file before being sent.
What you want to do, after a user uploads that image, verify that the file is a real image, then using some library (if you use a framework, it probably has a way to resize images) resize the image to whatever max width or max height or max width and height you are wanting.
This will decrease the size of an image.
For the 2nd question, if I understand it, you are talking about what about when a user uploads a 500x500 and you want it to be 400x250, then you must scale and crop, this way the image is never stretched but a few pixels from the top or the bottom will probably be removed.