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

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