I am letting users preview images using URL.createObjectURL() (which represents the image as a blob). This has worked great, but now I am using the plugin jCrop to let users crop said images and I have encountered a minor issue.
jCrop has worked fine for blobs derived from jpg files and png files w/o transparency, but blobs derived from png files with transparency are rendering transparent pixels (on the canvas) as black (the same effect was happening with these images when resized and uploaded to the backend (php) but this was corrected using imagealphablending()).
jCrop is called as followed:
jQuery(function($) {
$("#myImageContainer").Jcrop({
onChange: myFunction
}, function () {
jcrop_api = this;
});
});
The "black" images on canvas are uploaded and saved properly with transparency, so this is a front end effect only. Additionally, the same effect is observed when the source png is used to preview instead of the png-derived blob. Is their any way to correct for this effect on the canvas instead of the backend?
UPDATE: The transparent image is black from the start...I am assuming the author of the plugin set the canvas background to be black. I will try and change this.
I can't find a solution to this. I want to add 20px empty space to this image:
http://img233.imageshack.us/img233/419/78317401.jpg
and then paste this watermark at the bottom (on the blank space)
So the output would be:
http://img252.imageshack.us/img252/4554/wynik.jpg
I don't want to stretch it.
EDIT
Did it with WIdeImage. Rly simple.
1) Load both images with
http://www.php.net/manual/en/function.imagecreatefromjpeg.php
2) Get 1st image height and width with
http://www.php.net/manual/en/function.imagesy.php
http://www.php.net/manual/en/function.imagesx.php
3) Create larger image with height+20
http://www.php.net/manual/en/function.imagecreatetruecolor.php
4) Copy the first image and the second image to the larger image
http://www.php.net/manual/en/function.imagecopy.php
5) Save it
http://www.php.net/manual/en/function.imagejpeg.php
6) Done
Try wide image api http://wideimage.sourceforge.net/
Check out one of their this demo may be that help you
Merge and
Resize
I need to resize an image to a defined width and height but crop the bottom to the height if it is larger or add blank space to the bottom if it is smaller. How to accomplish that with the help of PHP's GD?
I maid a function for this: PHP/GD Imagestyle
You can create thumbnails exactly as you described with the following:
$thumb = imagestyle($image,'autosize:100 100');
But also if you need something more complicated you can use:
// resize 200 0 means width=200 height=auto
$thumb = imagestyle($image,'resize:200 0; crop:200 200;');
You can use phpThumb library.
Take a look https://github.com/masterexploder/PHPThumb/wiki/Basic-Usage
I'm working on project where we are trying to adopt and resize template images to the various resolutions. For example if the website is viewed in 800px width (800x600) and 1024px width or larger the image size should be viewed in same quality.
I've had in mind to use sprite with 3 types of images for each range of this template , but I'm looking for other ideas , php gd maybe ? Any python solution ?
Well, for resizing it would of course be better to use GD... But indexed, I think. So that you have an upload script that automatically generates the images' in other sizes, and saves them somewhere.
However, it matters whether you have more disk space, or performance... Performance would get worse IF you have many people viewing these images. Disk space would get worse IF you have A LOT of these images.
Python Imaging Library will give you dynamic resizing, processing, etc.
If you are resizing to a known set of resolutions, you can just resize your images once and store them.
If you need to resize for any possible resolution, you will need a library to do that for you. In PHP, GD or ImageMagik are both good.
If you do this, you may want to add caching for the most common resolutions. This will take up more disc space, but will save you the cost of recalculating all the images every time.
Note that it can be difficult to detect the true resolution though. If the browser window is resized, the resolution you think the screen is may not be the actual resolution the user can see. The same can happen if they have toolbars or sidebars opened.
Why not resize the image on the client using JavaScript?
<head>
<script>
function resize() {
ww = window.innerWidth
wh = window.innerHeight
photo = document.getElementById("photo")
// You probably wouldn't actually make the image fill the window, you'd pick
// some appropriate size.
photo.setAttribute("width", ww)
photo.setAttribute("height", wh)
}
</head>
<body onload="resize()" onresize="resize()">
<img id="photo" src="photo.jpg">
Getting the inner window width is quite hard, as different browsers use different variables. However, this is what I use on my website. It gets the inner window width rather reliably, and then sets the image width/height. It shouldn't be too hard to modify this code to set the src of the image desired.
function set_image_sizes(){
if (window.innerHeight != undefined) {
height = window.innerHeight;
width = window.innerWidth;
} else if (document.documentElement.clientHeight > 0) {
height = document.documentElement.clientHeight;
width = document.documentElement.clientWidth;
} else {
height = document.body.clientHeight;
width = document.body.clientWidth;
}
$('#image').css('height', height);
$('#image').css('width', width);
}
I have a gif file with many icons and buttons on it..
What I want to do is include that gif file using php gd somefunction("file.gif")
then, resize the new image to 30px by 30px.. and then be able to position (using x and y coordinates) the actual gif file, so that only a certain area of the image shows on the new file..
just like the css background-position property but, with gd.
Thanx
imagecopyresized() resizes the image, so it doesn't quite work for what I was exactly looking for.
For anyone else that might need this, the best function is actually imagecopy().
http://www.php.net/manual/en/function.imagecopy.php
It will do the trick..
Thanx Trufa for the quick answer though.
imagecopyresized()
http://www.php.net/manual/en/function.imagecopyresized.php
Should do the trick for adjusting the size.