febone
asked on
Attaching an image saved in MySql as a background-image instead of setting <img src
Background:
I have a gallery page that displays the large image by attaching it as the background image to a styled <div> when you click on a thumbnail..
<div id=viewer></div>
<script language="javascript" type="text/javascript">
function ShowImage(image,width,heig ht){
newimage='url(' + image + ')';
document.getElementById('v iewer').st yle.backgr oundImage= newimage;
document.getElementById('v iewer').st yle.width= width;
document.getElementById('v iewer').st yle.height =height;
}
</script>
triggered as follows:
<div class="smallpic"><img onMouseover="this.style.cu rsor = 'hand'" onMouseout="this.style.cur sor = 'auto'" onClick="ShowImage('1.jpg' ,'264px',' 350px')" src="thumbs/1.jpg" /></div>
The situation:
I have to provide a databased solution with the images stored in MySql...
I can retrieve the saved images and display them using this code....
<div class=smallpic>
<?php
echo "<a href=get_image.php?id=2&im age=5><img src=get_image_tn.php?app_i d=2&image= 5 border=\"0\"></a>";
?>
</div>
which simply pops the image up in a browser window, but the design really calls for the image to display in the styled viewer div. If I could get something like this:
<?php
echo "<script language=\"javascript\" type=\"text/javascript\">\ n";
echo "document.getElementById(' viewer').s tyle.backg roundImage =url(get_i mage.php?i d=2&image= 5);\n";
echo "</script>";
?>
(which throws the javascsript error "invalid assignment left-hand side") to work I am hoping I can simply rewrite my ShowImage function, but after a couple of days trying and researching figured I should simply ask! I played around with output buffering, but no luck there either.
Thanks for your help,
Francis
get_image.php is:
<?php
require '../sqlconnect.php';
$id = $_GET['id'];
$image = $_GET['image'];
$query = "SELECT image_name, image_type, image_size, image_file FROM application_images WHERE application_id = $id AND image_name = '$image' and flag_archived = 0";
$result = mysql_query($query) or die('Error, query failed');
list($name, $type, $size, $content) = mysql_fetch_array($result) ;
// header("Content-Dispositio n: attachment; filename=$name");
header("Content-length: $size");
header("Content-type: $type");
echo $content;
mysql_close();
?>
For what its worth, the images are resized to a standard size and thumbnailed before saving in BLOB's with the following function, where $resizedFile is the saved content:
function resize_image($tmpName, $fileType, $fileSize, $max_width, $max_height){
/* Creates resized image file as global var $resizedFile */
global $resizedFile;
global $iFileWidth;
global $iFileHeight;
$vars = explode('/',$fileType);
$type = $vars[1];
$fp = fopen($tmpName, 'r');
$content = fread($fp, $fileSize);
$oSourceImage = imagecreatefromstring($con tent);
$x = imagesx($oSourceImage); // uploaded image width, pixels
$y = imagesy($oSourceImage); // uploaded image height, pixels
if($x==0 || $y==0)return $file='';
if ($x > $max_width || $y > $max_height){
if ($x > $y){
// wide..
if($x > $max_width){
$newx=$max_width;
$newy = resize_height($x, $y, $max_width);
}
}elseif($y > $x){
// tall..
if($y > $max_height){
$newy=$max_height;
$newx = resize_width($x, $y, $max_height);
}
}else{
// square..use smallest max size...
$newx = ($max_width > $max_height)? $max_height : $max_width;
$newy = $newx;
}
}else{
$newx = $x;
$newy = $y;
}
$oDestinationImage = imagecreatetruecolor($newx , $newy);
$oResult = imagecopyresampled( $oDestinationImage, $oSourceImage, 0, 0, 0, 0, $newx, $newy, $x, $y); // resize the image
ob_start(); // Start capturing stdout.
switch($type){
case "jpeg":
case "jpg":
imagejpeg($oDestinationIma ge); // As though output to browser.
break;
case "png":
imagepng($oDestinationImag e);
break;
case "gif":
imagegif($oDestinationImag e);
break;
}
$resizedFile = addslashes(ob_get_contents ()); // the raw image data.
ob_end_clean(); //
fclose($fp);
imagedestroy($oDestination Image);
$iFileWidth = $newx;
$iFileHeight = $newy;
return true;
}
?>
I have a gallery page that displays the large image by attaching it as the background image to a styled <div> when you click on a thumbnail..
<div id=viewer></div>
<script language="javascript" type="text/javascript">
function ShowImage(image,width,heig
newimage='url(' + image + ')';
document.getElementById('v
document.getElementById('v
document.getElementById('v
}
</script>
triggered as follows:
<div class="smallpic"><img onMouseover="this.style.cu
The situation:
I have to provide a databased solution with the images stored in MySql...
I can retrieve the saved images and display them using this code....
<div class=smallpic>
<?php
echo "<a href=get_image.php?id=2&im
?>
</div>
which simply pops the image up in a browser window, but the design really calls for the image to display in the styled viewer div. If I could get something like this:
<?php
echo "<script language=\"javascript\" type=\"text/javascript\">\
echo "document.getElementById('
echo "</script>";
?>
(which throws the javascsript error "invalid assignment left-hand side") to work I am hoping I can simply rewrite my ShowImage function, but after a couple of days trying and researching figured I should simply ask! I played around with output buffering, but no luck there either.
Thanks for your help,
Francis
get_image.php is:
<?php
require '../sqlconnect.php';
$id = $_GET['id'];
$image = $_GET['image'];
$query = "SELECT image_name, image_type, image_size, image_file FROM application_images WHERE application_id = $id AND image_name = '$image' and flag_archived = 0";
$result = mysql_query($query) or die('Error, query failed');
list($name, $type, $size, $content) = mysql_fetch_array($result)
// header("Content-Dispositio
header("Content-length: $size");
header("Content-type: $type");
echo $content;
mysql_close();
?>
For what its worth, the images are resized to a standard size and thumbnailed before saving in BLOB's with the following function, where $resizedFile is the saved content:
function resize_image($tmpName, $fileType, $fileSize, $max_width, $max_height){
/* Creates resized image file as global var $resizedFile */
global $resizedFile;
global $iFileWidth;
global $iFileHeight;
$vars = explode('/',$fileType);
$type = $vars[1];
$fp = fopen($tmpName, 'r');
$content = fread($fp, $fileSize);
$oSourceImage = imagecreatefromstring($con
$x = imagesx($oSourceImage); // uploaded image width, pixels
$y = imagesy($oSourceImage); // uploaded image height, pixels
if($x==0 || $y==0)return $file='';
if ($x > $max_width || $y > $max_height){
if ($x > $y){
// wide..
if($x > $max_width){
$newx=$max_width;
$newy = resize_height($x, $y, $max_width);
}
}elseif($y > $x){
// tall..
if($y > $max_height){
$newy=$max_height;
$newx = resize_width($x, $y, $max_height);
}
}else{
// square..use smallest max size...
$newx = ($max_width > $max_height)? $max_height : $max_width;
$newy = $newx;
}
}else{
$newx = $x;
$newy = $y;
}
$oDestinationImage = imagecreatetruecolor($newx
$oResult = imagecopyresampled( $oDestinationImage, $oSourceImage, 0, 0, 0, 0, $newx, $newy, $x, $y); // resize the image
ob_start(); // Start capturing stdout.
switch($type){
case "jpeg":
case "jpg":
imagejpeg($oDestinationIma
break;
case "png":
imagepng($oDestinationImag
break;
case "gif":
imagegif($oDestinationImag
break;
}
$resizedFile = addslashes(ob_get_contents
ob_end_clean(); //
fclose($fp);
imagedestroy($oDestination
$iFileWidth = $newx;
$iFileHeight = $newy;
return true;
}
?>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.