troubleshooting Question

Attaching an image saved in MySql as a background-image instead of setting <img src

Avatar of febone
febone asked on
PHP
1 Comment1 Solution313 ViewsLast Modified:
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;
            }
?>

 
Join the community to see this answer!
Join our exclusive community to see this answer & millions of others.
Unlock 1 Answer and 1 Comment.
Join the Community
Learn from the best

Network and collaborate with thousands of CTOs, CISOs, and IT Pros rooting for you and your success.

Andrew Hancock - VMware vExpert
See if this solution works for you by signing up for a 7 day free trial.
Unlock 1 Answer and 1 Comment.
Try for 7 days

”The time we save is the biggest benefit of E-E to our team. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange.

-Mike Kapnisakis, Warner Bros