Image display using php without affecting the html code

Question

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

FoRMat YoUr COdE ReAlLy to mAkE it EaSy On THe EyeS!!!

Shef
– Shef

2011-08-20 12:04:37 +00:00
Commented Aug 20, 2011 at 12:04 — Shef
– Shef, Commented Aug 20, 2011 at 12:04

DaveRandom · Accepted Answer · 2011-08-20 12:45:33Z

3

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).'" />
  ';

?>

edited Aug 20, 2011 at 12:45

answered Aug 20, 2011 at 12:12

DaveRandom

88.8k11 gold badges159 silver badges174 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Shi Over a year ago

The op is aware of that but asked for a solution NOT using it.

DaveRandom Over a year ago

[facepalm] @Shi sorry I'm still half asleep. You are absolutely right and your solution is the answer...

Shi Over a year ago

@Simo TAQI You can either use urlencode() as DaveRandom suggested, even though the URI will stil be there, just "encoded", or you use a database of some kind and then only distribute identifiers, like image.phpimage=1&width=200`. On request, the identifier is looked up in the database, the URI fetched from there and then the game continues as already implemented.

Shi Over a year ago

+1 for this now. Though, be aware that your image type detection is flawed. It is easy to have an URI called …/image.jpeg and then return PNG data with a proper Content-Type: image/png. So a better way would be to use get_headers() in order to detect the Content-Type and dispatch on the result. (Or to hack gd directly to make it do that automatically.)

DaveRandom Over a year ago

Granted, and indeed if your going to do that you might as well just pick a format and use that one. Since your fetching images from a remote location, screwing around with them and forwarding them to the browser, there's nothing that says they have to be in the same format when they leave as they were when they arrived. I just did it that way because it was how it was done in the first place :-)

|

Shi · Accepted Answer · 2011-08-20 12:38:36Z

1

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();

edited Aug 20, 2011 at 12:38

answered Aug 20, 2011 at 12:08

Shi

4,2581 gold badge28 silver badges31 bronze badges

7 Comments

SmootQ Over a year ago

thank you friend, but what about this ???(iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4/8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==) is it the url of the image??

Codemwnci Over a year ago

The code is the base64 encoded DATA of the image. The string represents a small red dot (read the link, it explains a lot!). Be warned with this approach though, it is not supported some browsers, including IE7 and previous.

Shi Over a year ago

No, it is not the URI, it is the actual encoded data - it is the image itself.

Shi Over a year ago

I added the needed adjustment to displayimg_w() as pointed out by DaveRandom.

DaveRandom Over a year ago

@Simo TAQI I have just edited my answer so it should be exactly what you need, in an effort to make up for my earlier emabarassment...

|

Collectives™ on Stack Overflow

Image display using php without affecting the html code

Hello World

2 Answers 2

6 Comments

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

Hello World

2 Answers 2

6 Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related