Link to home
Start Free TrialLog in
Avatar of febone
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,height){
      newimage='url(' + image + ')';
      document.getElementById('viewer').style.backgroundImage=newimage;
      document.getElementById('viewer').style.width=width;
      document.getElementById('viewer').style.height=height;
}
</script>
 
triggered as follows:
<div class="smallpic"><img onMouseover="this.style.cursor = 'hand'" onMouseout="this.style.cursor = '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&image=5><img src=get_image_tn.php?app_id=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').style.backgroundImage=url(get_image.php?id=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-Disposition: 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($content);
                  
                  $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($oDestinationImage); // As though output to browser.
                              break;
                              case "png":
                                    imagepng($oDestinationImage);  
                              break;
                              case "gif":
                                    imagegif($oDestinationImage);
                              break;
                        }
                  $resizedFile = addslashes(ob_get_contents()); // the raw image data.
                  ob_end_clean(); //
                  fclose($fp);
                  imagedestroy($oDestinationImage);
                  
                  $iFileWidth = $newx;
                  $iFileHeight = $newy;                  
                  
                  return true;
            }
?>

 
ASKER CERTIFIED SOLUTION
Avatar of Richard Davis
Richard Davis
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial