Question

我正在使用pChart创建一些条形图。通过一些复选框，用户可以选择将在图表中显示哪些ID。

我需要这不是刷新网站，不是iframe，不是ajax。首先，我将解释我的工作，然后回到标题，标题问题。

我有1个html文件和1个php文件。在第一个中，javascript用于调用创建图形的php函数。而且工作正常，唯一的问题是我无法显示生成的图像，因为图像有错误，但事实并非如此，当我打开生成的图像时显示完美。这是代码：

HTML + JS：

<input checked="checked" name="ids" id="id_1" value="1" type="checkbox">
<input checked="checked" name="ids" id="del_2" value="2" type="checkbox">
<input checked="checked" name="ids" id="del_3" value="3" type="checkbox">   

<input type="button" id="generarImg" name="generarImg" value="Generar Grafico" onClick="javascript: generarImg()" />
    <div id="barGraph"></div>

    <script type="text/javascript">
        function generarImg(){
            var checks = '';
            $("input:checkbox[name=del]:checked").each(function(){
                if(checks == ''){
                    checks = ($(this).val());
                } else {
                    checks = checks + "," + ($(this).val());
                }
            });
            document.getElementById('barGraph').innerHTML = "<img src='bargraph.php?ids=" + checks + "' alt='' title='Bar Graph' />";
        }
    </script>

PHP：

$db=db_connect(MYDB_CONN_STRING2);
$query_res=db_query($db,"
select id,value from table1
limit 3");

    $ids = $_GET['ids'];
    $ids = explode(",", $ids);
    for ($i=0;$i<count($query_res); $i++) {
        if(in_array($query_res[$i]["id"],$ids)){
            $tableids[]=$query_res[$i]["id"];
            $values[]=$query_res[$i]["value"];
        }
    }
    BarGraph($tableids, $values);

    function BarGraph($ids, $values){
        //Set the data for the graph.
        $DataSet = new pData;
        $DataSet->AddPoint($values,"Values");
        $DataSet->SetYAxisName("Values");
        $DataSet->SetXAxisName("Ids");      
        $DataSet->AddAllSeries();

        $DataSet->AddPoint($ids,"Ids");
        $DataSet->SetAbsciseLabelSerie("Ids");

        //Draw the graph area.
        $Test = new pChart(900,300);
        $Test->setFontProperties("graphs/pChart/Fonts/tahoma.ttf",10);
        $Test->setGraphArea(100,100,700,250);
        $Test->drawGraphArea(252,252,252);
        $Test->drawScale($DataSet->GetData(),$DataSet->GetDataDescription(),SCALE_NORMAL,150,150,150,TRUE,0,0,TRUE,0);
        $Test->drawGrid(4,TRUE,230,230,230,255);

        //Draw the graph and then add some titles.
        $Test->drawBarGraph($DataSet->GetData(),$DataSet->GetDataDescription());

        $Test->setFontProperties("graphs/pChart/Fonts/tahoma.ttf",8);
        $Test->drawLegend(45,35,$DataSet->GetDataDescription(),255,255,255);
        $Test->setFontProperties("graphs/pChart/onts/tahoma.ttf",10);
        $Test->drawTitle(60,22,"My pretty graph",50,50,50,585);

        //Render the graph to .png, THIS WORKS FINE!
        $Test->Render("BarGraph.png");

        //HERE IS THE ISSUE
        header('Content-type: image/png');
        echo '<img src="BarGraph.png" alt="" title="Bar Graph"/>';
    }

因此，如果我echo图像中没有header('Content-type: image/png');的图像（转到该链接），则显示图像。但不是在HTML中，因为我给了一个img标签，一个php文件。所以我添加了标题，但是当添加它时，php文件全部变黑，并显示以下消息：“图像”图像名称“无法显示，因为它包含错误”。并且HTML文件中没有显示任何内容img标签。

有什么想法吗？

Answer 1

您是否尝试使用readfile()？

那么你的代码就是：

header('Content-Type: image/png');
readfile('BarGraph.png');

我只是在自己的域名上测试了它。

我使用的代码如下：

<强> testimage.html

<html>
  <head>
    <script type="text/javascript">
    function pullPic(){
      var val = document.getElementById('choice').value;
      document.getElementById('picture').innerHTML = "<img src='testimage.php?duck=" + val + "' />";
    }
    </script>
  </head>
  <body>
    <select id="choice">
      <option value="duck1">duck 1</option>
      <option value="duck2">duck 2</option>
    </select>
    <button type="submit" onclick="pullPic();">Click</button>
    <div id="picture"></div>
  </body>
</html>

<强> testimage.php

<?php
if(isset($_REQUEST['duck'])) {
    header('Content-Type: image/jpg');
    if($_REQUEST['duck'] == 'duck1') {
        readfile('duck.jpg');
    } else if($_REQUEST['duck'] == 'duck2') {
        readfile('duck2.jpg');
    }
}
?>

这意味着您不需要使用AJAX，刷新或iframe。您可以查看here for the time being

Answer 2

我尝试了你的代码，我可以通过dataURL来做到这一点。因此，在我的代码中，我使用了render而不是autoOutput。所以我的代码如下。

在php中，

$myPicture->autoOutput($target);  //save the file

在JS中，和你使用的一样。

document.getElementById('picture').innerHTML = "<img src='<phpfile including location>' />";

这个适合我。

添加标题会使页面无法显示图像

2 个答案: