在javascript中使用$ .get從PHP文件中獲取PNG內容

Question

我在javascript中使用$ .get函數來獲取php文件的輸出。

如何使用此函數從php文件中獲取創建的圖像並以html格式顯示？

在html文件中（似乎圖像無法設置為“span”）：

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

在javascript中：

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

在PHP中：

//Set content-type header

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

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

這個輸出是一個小空方塊。

Answer 1

將你的HTML設置為這個

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

然后當你想刷新圖像時，只需在點擊或任何其他事件的jQuery中執行此操作

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

Answer 2

如果您的php腳本返回原始圖像數據，那么您可以通過src鏈接到它，瀏覽器會將其識別為圖像（因為圖像標題也是如此），盡管擴展名為.php ex：

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

另一種方法是，如果您對圖像的內容進行編碼並返回沒有任何標題的base64編碼字符串。 來自舊項目的一些代碼可能有所幫助。

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

        }


    }

?>