I am learning web development. I am doing a project which takes screenshots of IP cameras and output the images in a user friendly webpage.
I have a php script which finds the latest image in a directory and creates a png image.
I also have a html file to use a test for the webpage.
I cannot seem to get the output for the image in php to be used in my html file. In my html code below, I have hard coded images from the directory. This is where I need the image variable to be.
php output:
/////Create image from latest file/////
$imagepath = $path . $last_file; //Create full path string -> (C:/xampp/htdocs/VideoWallTest/ + latest image filename)
//echo $imagepath; //Test message to show full filename
$image=imagecreatefrompng($imagepath); //create image from png
$imgheight=imagesy($image); //Set image height as height of original image
$color=imagecolorallocate($image, 255, 255, 255); //Set color for image caption (white)
//Add text to image bottom
imagestring($image, 5, 100, $imgheight-50, "Test_VideoWall", $color); //Select where text will appear and properties
header('Content-Type: image/png');
// Output
imagepng($image);
Html code:
<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<title>Cadillac Videowall Monitoring</title>
<style type="text/css">
</style>
</head>
<body>
<div class="wrap">
<!-- Define all of the tiles: -->
<div class="box">
<div class="boxInner">
<img src="/VideoWallTest/12-30-14_2016-06-27.png" />
<p><a href="http://localhost/VideoWallTest/">TEST 1</a><p>
<div class="titleBox">1</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="/VideoWallTest/12-30-14_2016-06-27.png" />
<p><a href="http://localhost/VideoWallTest/">TEST 2</a><p>
<div class="titleBox">2</div>
</div>
</div>
<div class="box">
<div class="boxInner">
<img src="/VideoWallTest/12-30-14_2016-06-27.png" />
<p><a href="http://localhost/VideoWallTest/">TEST 3</a><p>
<div class="titleBox">3</div>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire