代码之家 › 专栏 › 技术社区 › user2212461

在javascript中使用$.get从PHP文件中获取PNG内容

html jquery javascript php

user2212461 · 技术社区 · 12 年前

我使用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');

这个输出是一个小的空正方形。

2 回复 | 直到 12 年前

Dexa 12 年前

将你的html设置为

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

然后,当您想刷新图像时,只需在单击或任何其他事件时在jQuery中执行此操作

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

0x_Anakin 12 年前

如果你的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)) . '">';

        }


    }

?>