I have multiple images over layed in an HTML file…the images are constantly changing…sometimes no overlays sometimes 20 overlays…I was wondering if you can merge images in an HTML file using php…any help would be great.
Thanks, Dave
Dave,
I just want to make sure I understand what you are looking to do. Are you looking to combine multiple images into one single image using php? If so, yes, you can do this using both GD and ImageMagick. GD is a built in library, where ImageMagick is an add-on.
I have always been able to use GD without issue; however, most people prefer ImageMagick. I have seen benchmarks that also indicate that ImageMagick is faster with most of the “out-of-the-box” functions. If you will always have control over the server your script runs on, ImageMagick should be fine, if not, I would try GD first.
If you could provide a specific example of what you are looking to do, I would be happy to try to put together some code to illustrate how you could accomplish it.
jay
I’ll show you a specific example when I get home if that’s OK. Can php pull all the out of a HTML file and combine them all into 1 image? Its a base map and a bunch of overlays… I’ll show you a specific example when I get home.
Oh and thanks for the help so far…its greatly appreciated
PHP can pull all the values from an html file and combine them. It does take some work, but I would be happy to help you get it done.
I’ll wait for your example.
OK I think I have a good example for you. Let me tell you the whole thing about my warning map. I have a php script read data from Environment Canada for a bunch of things…if there is a warning…what type of warning…and where it is for…I have a cron job set up to run that script every 5 minutes to grab the data. If the specific string is met…then the given overlay for the type of warning and area it is for will show up. Here is an example of the page…that I made up…the script will echo the <img src for the specific warning and create this html page http://www.southernontariochasing.ca/example.html right now I just have it set up as an example…thats how it will look during a severe weather event…however the overlays are always changing…can range from just the base map with no warnings to over 20 warnings. I just need the php to combine all that into 1 image. Hopefully that explains it a bit. Thanks for the help
Dave,
P.S Have attached the code for that page here. [code]
OK, we will probably need to do this in a couple of steps.
Lets start with a proof of concept test, combining the images on your example page.
Try the code below and let me know if it is working or if you get any errors. It works on my server, but it is dependent on the curl library. If you do not have access to curl we can change it, but I would definitely use curl over the alternatives if it’s available.
[php]<?php
$target_url = ‘http://www.southernontariochasing.ca/example.html’;
$baseurl = ‘http://www.southernontariochasing.ca’;
function curlGet($url,$binary=0)
{
$ch = curl_init();
curl_setopt($ch, CURLOPT_TIMEOUT, 10);
curl_setopt($ch, CURLOPT_URL,$url);
curl_setopt($ch, CURLOPT_USERAGENT, ‘Mozilla/5.0 (Windows NT 6.2; WOW64; rv:15.0) Gecko/20120910144328 Firefox/15.0.2’);
curl_setopt($ch, CURLOPT_AUTOREFERER, true);
curl_setopt($ch, CURLOPT_RETURNTRANSFER,true);
curl_setopt($ch, CURLOPT_FOLLOWLOCATION, true);
curl_setopt($ch, CURLOPT_FAILONERROR, true);
curl_setopt($ch, CURLOPT_BINARYTRANSFER, $binary);
$page = curl_exec($ch);
return($page);
}
function getImgSrc($url)
{
$src = array();
// Create a DomDocument Object From Target URL
$dom = new DOMDocument();
@$dom->loadHTML(curlGet($url));
// Use Xpath to Get What we Need
$xpath = new DOMXPath($dom);
$imgs = $xpath->evaluate('//img/@src');
// Fill an array ($scr) with the extracted image srcs.
foreach($imgs as $img) $src[] = $img->nodeValue;
return $src;
}
// Get all of the image srcs for the target_url
$srcs = getImgSrc($target_url);
foreach($srcs as $src)
{
// Get next Image
$img = imagecreatefromstring(curlGet($baseurl.$src,1));
// Convert Background Color (top-left pixel) to Transparent
imagecolortransparent($img,imagecolorat($img,0,0));
// If this is the first time through, create a palatte with the image's width and height
if(empty($im))
{
$w = imagesx($img);
$h = imagesy($img);
$im = imagecreatetruecolor($w,$h);
}
imagealphablending($im, true);
imagecopymerge($im, $img, 0, 0, 0, 0, $w, $h, 100);
imagedestroy($img);
}
header(‘Content-type: image/png’);
imagepng($im);[/php]
Gonna give it a try now. So what this does is take the images and combines them into 1 image on the server when the script is run correct?
OK thats a start. Combine worked great. http://www.southernontariochasing.ca/imagecombine.php
Only thing is transparency is lost.
OK,
Should be an easy fix. I’ll look at it right now.
Sounds good, 1 other thing…after the script has combined the images…can we save it as a separate PNG on the server?
OK,
Sorry about that: lets change:[php]imagecopymerge($im, $img, 0, 0, 0, 0, $w, $h, 100);[/php]
To:
[php]imagecopy($im, $img, 0, 0, 0, 0, $w, $h);[/php]
Perfect, any way to output that merged image to a png that is saved on the server
Sorry,
I just saw your other post.
To save the image to the server, put this:[php]imagepng($im,‘combined.png’);[/php]
…just above the header line.
The bottom of the file should look like this:[php]imagepng($im,‘combined.png’);
header(‘Content-type: image/png’);
imagepng($im);[/php]
You can change the filename or path as desired.
jay
Perfect, thanks very much. Works great