CODEWITHSUNDEEP
phphtmlimage
SmootQ
SmootQ

Reputation: 2122

Image display using php without affecting the html code

I have a question about the images displaying using a function getImage_w($image,$dst_w), which takes the image URL ($image) and the destination width for this image ($size). Then it re-draws the image changing its height according to the destination width.

That's the function (in libs/image.php file):

function getImage_w($image,$w){
       /*** get The extension of the image****/
      $ext= strrchr($image, ".");
       /***check if the extesion is a jpeg***/
        if (strtolower($ext)=='.jpg' || strtolower($ext)=='.jpeg'){
       /***send the headers****/
        header('Content-type: image/jpeg');
        /**get the source image***/
        $src_im_jpg=imagecreatefromjpeg($image);
        /****get the source image size***/
        $size=getimagesize($image);
        $src_w=$size[0];
        $src_h=$size[1];
        /****calculate the distination height based on the destination width****/
        $dst_w=$w;
        $dst_h=round(($dst_w/$src_w)*$src_h);
        $dst_im=imagecreatetruecolor($dst_w,$dst_h);
        /**** create a jpeg image with the new dimensions***/
        imagecopyresampled($dst_im,$src_im_jpg,0,0,0,0,$dst_w,$dst_h,$src_w,$src_h);
        imagejpeg($dst_im);
}

In a file imagetest.php I have this code portion:

<?php
require 'libs/image.php';
echo '<h1>HELLO WORLD : some html</h1>
<img src="'.displayImg_w('http://www.sanctius.net/wp-content/uploads/2010/05/Avatar-20.jpg',200).'">
';

In the past, I used to write the URL with $_GET paramers defining the image. But now , I want to use the function directly in my code.

The problem is that the image is displaying correctly, but the

Hello World

HTML code is not translated by the browser (I know that the header are already sent by the first code) But I want to know how to display the image correctly without affecting the html code. and also without using get parameters that change the URL of the image to this undesired form :

libs/image.php?image=http://www.example.com/image&width=200

Upvotes: 0

Views: 3204

Answers (2)

DaveRandom
DaveRandom

Reputation: 88647

After my earlier, totally wrong answer, I hope to make up for it with this. Try this code:

<?php

  function getImage_w($image,$w){
    // Get the extension of the file
    $file = explode('.',basename($image));
    $ext = array_pop($file);
    // These operations are the same regardless of file-type
    $size = getimagesize($image);
    $src_w = $size[0];
    $src_h = $size[1];
    $dst_w = $w;
    $dst_h = round(($dst_w/$src_w)*$src_h);
    $dst_im = imagecreatetruecolor($dst_w,$dst_h);
    // These operations are file-type specific
    switch (strtolower($ext)) {
      case 'jpg': case 'jpeg':
        $ctype = 'image/jpeg';;
        $src_im = imagecreatefromjpeg($image);
        $outfunc = 'imagejpeg';
        break;
      case 'png':
        $ctype = 'image/png';;
        $src_im = imagecreatefrompng($image);
        $outfunc = 'imagepng';
        break;
      case 'gif':
        $ctype = 'image/gif';;
        $src_im = imagecreatefromgif($image);
        $outfunc = 'imagegif';
        break;
    }
    // Do the resample
    imagecopyresampled($dst_im,$src_im,0,0,0,0,$dst_w,$dst_h,$src_w,$src_h);
    // Get the image data into a base64_encoded string
    ob_start();
    $outfunc($dst_im);
    $imgdata = base64_encode(ob_get_contents()); // Don't use ob_get_clean() in case we're ever running on some ancient PHP build
    ob_end_clean();
    // Return the data so it can be used inline in HTML
    return "data:$ctype;base64,$imgdata";
  }

  echo '<h1>HELLO WORLD : some html</h1>
  <img src="'.getImage_w('http://www.sanctius.net/wp-content/uploads/2010/05/Avatar-20.jpg',200).'" />
  ';

?>

Upvotes: 3

Shi
Shi

Reputation: 4258

This basically is not possible. The webbrowser requests the HTML page and expects HTML. Or it requests an image and expects an image. You cannot mix both in one request, just because only one Content-Type can be valid.

However, you can embed the image in HTML using data URI:

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4/8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot">

Be aware that the base64 encoding is quite ineffective, so make sure you definitly compress your output, if the browser supports it, using for example gzip.

So for you it likely looks like the following:

echo '<img src="data:image/jpeg;base64,' . base64_encode(displayImg_w('http://www.sanctius.net/wp-content/uploads/2010/05/Avatar-20.jpg',200)) . '">';

And make sure displayimg_w() does not output a header anymore.

Furthermore, displayimg_w() needs to be adjusted at the end to return the image data as string rather than direct output:

ob_start();
imagejpeg($dst_im);
return ob_get_flush();

Upvotes: 1

Related Questions