I'm trying to make a site with images on it, but I don't want to have the traditional thumbnail (where it's just a smaller image), I want something like this: http://imgur.com/r/funny
Notice how all the images' thumbnails are 160x160 and only shows the center of the image. I'd like to do something along those lines.
First, in PHP you use the gd-lib for such things.
The task goes this way:
Open the original-image with imagecreatefromXXXX: http://php.net/manual/de/function.imagecreatefromjpeg.php
Get the image-boundaries with imagesx() and imagesy()
The way you want to resize the images is: "Get the smaller side of the original-image and resize the image proportional. So, that at lease one side matches the corresponding resulting image's side". The ticky thing here is, when you have an targeted size, where horizontal- and vertical size are not equal. eg. 170x120.
Then you create a new image and resize/copy the original image with imagecopyresampled() into that.
You have now an image where one side is equal to the respective target side. The other side is bigger or has the same size as its corresponding size on the target image. The next step is to crop this image. This can also be done with imagecopyresampled() - also in the same step, were you resized the image.
Now save the image under a new filename (or in another directory) and link it...
Related
I want to change .webp image width or height to a higher value, and add some transparent area to the image.
For example, imagine I have a width:512*height:312 webp image, I need two steps:
1- Add 512*200 transparent area to my image.
2- Transform my image to the center of the new image.
OR
1- Add 512*100 transparent area to the top of my image.
2- Add 512*100 transparent area to the bottom of my image.
The final result I want, a 512*512 .webp image without any scale on my original image.
How can I do this with the PHP language?
Consider using Imagick extension.
I have a large database with images. Problem is, quite some images have the wrong thumbnail, so I need to confirm that they match.
I want to compare the thumbnail and full size image with each other, and come up with a percentage that they match.
The thumbnails & full images do not have exactly the same dimensions.
The full images are PNG's with transparent backgrounds, and the thumbnails have a grey/white grid as a background.
What is the best way to see if a thumbnail & full image match?
Example of how a full image & thumbnail look.
I found & tried: https://github.com/kennethrapp/phasher but this gets thrown off by the grid background in the thumbnails.
I had nearly the same problem and my solution was that I compare the timestamp of the full size image with the one of the thumb. If the thumb is older, then a new full size image was uploaded and my system creates a new thumb (and also clears the according cache).
What is the best way to fit an image for thumbnail example 200px x 200px ?
after researching here are the best options I found:
save 2 set of images for thumbnail and large slideshow purpose, for example if user uploads img001 , then save 2 copies of the same image one for thumbnail(resized 200px x 200px) and one for large slideshow purpose(actual dimension).
just use one image and use it responsive with 100% width and 200px height(for thumbnail) and let the large image be itself.
with solution 2 I found that the thumbnail image always look shrunk.
Please give some suggestions on dealing with thumbnail images, thanks in advance
Here is what i suggest.
Store only one original image at the time of saving.
Maintain a Cache folder for your images in such a way that the cached images are created whenever you need to display on whatever size you want.
eg : make a function something like
getCachedImage($post->image, '200x200-','200','200')
and inside that function you can have some logic to save a precise sized
image you want inside cache folder. Dont forget to check if the following size image is already been saved. You can use size as prefix ('200x200-$fileName') as i have mentioned on example. I use Image Intervention Package for my laravel project to save those picture in the size i want it to display.
Now you can call this function in your view wherever you need to display an image and you can call any size image you want.
You will always have shrunk image if you use your option number 2.
And Even in your option 1, if you saved one extra image as thumbnail you will never have exact needed size for you thumbnail, so at some place this thumbnail is also gonna shrink.
I have an ecommerce site in which i have to display some products i.e 40-50 products per page.Every product has an image which displays the image of the product.
The main thing is that in the database i have a meduim/high quality image of the product whose dimensions would be around 720px-1024 px , these can vary and every image has dimensions in between these two.
Now, i have two different ways of displaying these images for product, i could use a php script to generate thumbnails from these pics whose dimensions would be 290X290 or i could use the style tag and set the width and height as 290X290 and source as the real image.
Let me explain this by an example.
Original Image
I could do this to display the image
<img src="/imagethumbnail.php?product_id=34"/>
<img style="height:290px;width:290px" src="productimg.png"/>
finall image
one calls a php script and generate a thumbnail image of size 290X290 while the other one simply uses the style tag.
Both of them are working fine but i think when i use the style tags i see a trade off in image quality.While when i use the script to generate the image i see a trade off in image generation like they take sometime to show up on the page.
What would be the better method to do this and what would be the perfect solution towards it?
I think the standard method is to generate the thumbnails in advance. And you should probably set the width and height in the markup as attributes on the img element, rather than under the style attribute.
I am not sure if this is possible or not, but I am trying to create an effect where when you mouse over an image that is the creation of multiple images overlapped with each other (images would be set with some opacity), I display that section of the image clearer than the other.
Hard to explain, but here a few examples
This image:
is the creation of all those images overlapped (each image is on top of the previous)
When I mouse over the final image I want to be able to "highlight" the part of the image that corresponds to that section of the image in the image itself
Something I was thinking to do is to just show the main image with opaque set, when the user mouse over it, grab the coords, check against all of the images (that cannot be more than 25) see if those coordinates are matching with a non "transparent" pixel and display such image on top of the main to give an "highlighted" effect, but the final images are about 400x200 and create an array of all the pixels on the fly when displaying the page is not realistic for a server that have thousands of hits per hour/minutes. Save this array in a database is not realistic as well as the size of the image might change depending on the page and we currently have 1.3milions final images each one being on average circa 10 broken down images
A possible solution is to create custom SVG overlays for each sub-image. Upon an onmouseover event, you'd decrease the opacity of the SVG element, making the below image more visible.
Checkout this tool for creating SVGs.
$("img").css("opacity","0.8");
$("img").mouseover(function()
{
$(this).css("opacity","1.0");
});
$("img").mouseout(function()
{
$(this).css("opacity","0.8");
});
For the effect of segmenting the image, try using an image map:
http://www.javascriptkit.com/howto/imagemap.shtml
Opacity of image maps is supported:
http://www.thehelper.net/threads/can-i-use-opacity-on-imagemap.57999/
Edit:
To achieve the hovering effect, try loading them into a canvas using Fabric JS, here is a demo:
http://fabricjs.com/hovering/
Abandoned the project, the ony solution is SVG but it nos possible at this stage as some browsers/OS do not support fully them