Using $.get in javascript to get PNG content from PHP file

Question

I am using the $.get function in javascript to get the output of a php file.

How can this function be used to get a created image from a php file and display it in html?

In the html file (It seems an image cannot be set into a "span"):

<span id="box1"></span>

In javascript:

$.get('here.php', function(data) {
   document.getElementById('box1').innerHTML=data;
});

In php:

//Set content-type header

header("Content-type: image/png");

//Include phpMyGraph5.0.php
include_once('phpMyGraph5.0.php');

The output of this is a small empty square.

Answer 1

set your html as this

<img id="box1" src="here.php" />

and then when you want to refresh image just do this in jQuery on click or any other event

var d = new Date(); 
$('#box1').attr('src', 'here.php?' + d.getTime());

Answer 2

If your php script returns raw image data then you could just link to it via src the browser will recognize it as an image (because of the image header also) despite the extension being .php ex:

<img src="http://www.test.com/myImageScript.php">

The other way is if you encode the contents of an image and return a base64 encoded string without any headers. Some code from an old project that might help.

<?php 

    $outputs = array('raw','base_64');

    if(isset($_GET['source']) && strlen($_GET['source']) > 0 && isset($_GET['w']) && is_numeric($_GET['w']) && isset($_GET['h']) && is_numeric($_GET['h']) && isset($_GET['out']) && in_array($_GET['out'], $outputs))
    {

        $imgPath = trim(urldecode($_GET['source']));

        if(file_exists($imgPath))
        {
            include 'simpleImage.php';

            $w = $_GET['w'];
            $h = $_GET['h'];
            $out = $_GET['out'];

            processImage($imgPath, $w, $h, $out);
        }

    }



    function processImage($img, $w, $h, $out)
    {
        thumb($img, $w, $h, $out);
    }



    /*
    *   BASE_64 image data
    */
    function data_uri($contents, $mime) 
    {  
      $base64   = base64_encode($contents); 
      return ('data:' . $mime . ';base64,' . $base64);
    }



    /*
    *   Get mime type of file
    */
    function getMIME($filename)
    {

        if(function_exists('mime_content_type') && $mode==0)
        { 
                $mimetype = mime_content_type($filename); 
                return $mimetype; 
        }
        elseif(function_exists('finfo_open') && $mode==0)
        { 
                $finfo = finfo_open(FILEINFO_MIME); 
                $mimetype = finfo_file($finfo, $filename); 
                finfo_close($finfo); 
                return $mimetype; 
        }

    }



    /*
    *   Create image
    */
    function thumb($data, $w, $h, $out = 'raw')
    {
        $image = imagecreatefromstring(file_get_contents($data));

        $thumb_width = $w;
        $thumb_height = $h;

        $width = imagesx($image);
        $height = imagesy($image);

        $original_aspect = $width / $height;
        $thumb_aspect = $thumb_width / $thumb_height;

        if ( $original_aspect >= $thumb_aspect )
        {
           // If image is wider than thumbnail (in aspect ratio sense)
           $new_height = $thumb_height;
           $new_width = $width / ($height / $thumb_height);
        }
        else
        {
           // If the thumbnail is wider than the image
           $new_width = $thumb_width;
           $new_height = $height / ($width / $thumb_width);
        }

        $thumb = imagecreatetruecolor( $thumb_width, $thumb_height );

        // Resize and crop
        imagecopyresampled($thumb,
                           $image,
                           0 - ($new_width - $thumb_width) / 2, // Center the image horizontally
                           0 - ($new_height - $thumb_height) / 10, // 2 = Center the image vertically
                           0, 0,
                           $new_width, $new_height,
                           $width, $height);

        if($out == 'raw')
        {
            header('Content-Type: image/jpeg');
            imagejpeg($thumb);
        }
        elseif($out == 'base_64')
        {
            ob_start();
            imagejpeg($thumb);
            $thumbImageData = ob_get_contents();
            $thumbImageDataLength = ob_get_length();
            ob_end_clean();

            echo '<img src="' . data_uri($thumbImageData, getMIME($data)) . '">';

        }


    }

?>