Question

我试图在html页面中显示一个图像，在<img />标签中调用jsp页面，如下所示。我创建了动态网络项目，在index.html→timeseries.jsp文件夹下的webcontent文件夹webcontent下添加了jsp。当我在服务器上运行项目时，添加apache tomcat 6.0.18，它已同步，但是当我输入url localhost:8080/jfree时，它只显示页面上的hello doctor和image图标，但没有图像。

我的HTML是，

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
Hello doctor
<img src="/jfree/jsp/Timeseries.jsp" alt="Progress chart" />
</body>
</html>

我的JSP是，

<%@ page import="java.awt.Image" %>
<%@ page import="java.awt.*"%>
<%@ page import="java.text.SimpleDateFormat"%>
<%@ page import="java.awt.BasicStroke"%>
<%@ page import ="org.jfree.ui.ApplicationFrame"%>
<%@ page import="java.io.*" %>
<%@ page import="java.io.File"%>
<%@ page import="org.jfree.chart.*" %>
<%@ page import="org.jfree.chart.axis.*" %>
<%@ page import="org.jfree.chart.entity.*" %>
<%@ page import="org.jfree.chart.labels.*" %>
<%@ page import="org.jfree.chart.plot.*" %>
<%@ page import="org.jfree.chart.renderer.category.*" %>
<%@ page import="org.jfree.chart.urls.*" %>
<%@ page import="org.jfree.data.category.*" %>
<%@ page import="org.jfree.data.general.*" %>
<%@ page import="org.jfree.data.time.Minute"%>
<%@ page import="org.jfree.data.time.Hour"%>
<%@ page import="org.jfree.data.time.TimeSeries"%>
<%@ page import="org.jfree.data.time.TimeSeriesCollection"%>
<%@ page import="org.jfree.data.xy.XYDataset"%>
<%@ page import="org.jfree.chart.plot.XYPlot"%>
<%@ page import="org.jfree.chart.renderer.xy.StandardXYItemRenderer"%>
<%@ page import="org.jfree.chart.renderer.xy.XYItemRenderer"%>
<%@ page import="java.sql.Connection" %>
<%@ page import="java.sql.DriverManager" %>
<%@ page import="java.sql.SQLException" %>
<%@ page import="java.sql.PreparedStatement" %>
<%@ page import="java.sql.ResultSet" %>
<%@ page import=java.sql.Statement" %>
<%@ page import="javax.servlet.*" %>
<%@ page import="javax.servlet.http.*" %>

<%@ page import="java.awt.image.BufferedImage"%>
<%
try
{
    File image = File.createTempFile("image", "tmp");

    //chart class instance
    Fms fm = new Fms("Graph");

    JFreeChart chart = fm.createChart(fm.dataset);
    ChartUtilities.saveChartAsPNG(image, chart, 500, 400);
    //get input stream
    FileInputStream fileInStream = new FileInputStream(image);
    //output stream foe returning chart as image
    OutputStream outStream = response.getOutputStream(); 
    long fileLength;
    byte[] byteStream;
    fileLength = image.length();
    byteStream = new byte[(int)fileLength];
    //read chart image
    fileInStream.read(byteStream, 0, (int)fileLength);
    //returns chart image whenever called
    response.setContentType("image/png");
    response.setContentLength((int)fileLength);
    response.setHeader("Cache-Control","no-store,no-cache, must-revalidate, post-check=0, pre-check=0");
    response.setHeader("Pragma", "no-cache");
    fileInStream.close();
    outStream.write(byteStream);
    outStream.flush();
    outStream.close();
}
catch (IOException e)
{
    System.err.println("Problem occurred creating chart.");
}
%>
<%!
public class Fms extends ApplicationFrame {
    //Main class
    XYDataset dataset= null;
    public Fms(final String title) {
        super(title);
        dataset= createDataset();
        final JFreeChart chart = createChart(dataset);
        final ChartPanel chartPanel = new ChartPanel(chart);
        chartPanel.setPreferredSize(new java.awt.Dimension(700, 570));
        chartPanel.setMouseZoomable(true, false);
        setContentPane(chartPanel);
    } 
    //chart creation method
    JFreeChart createChart(final XYDataset dataset) {
        final JFreeChart chart = ChartFactory.createTimeSeriesChart(
                                    "Speed Chart",
                                    "Time",
                                    "Speed",
                                    dataset,
                                    true,
                                    true,
                                    false
                                    );
        chart.setBackgroundPaint(Color.white);
        final XYPlot plot = chart.getXYPlot();
        plot.setBackgroundPaint(Color.lightGray);
        plot.setDomainGridlinePaint(Color.white);
        plot.setRangeGridlinePaint(Color.white);
        plot.setDomainCrosshairVisible(true);
        plot.setRangeCrosshairVisible(false);
        final XYItemRenderer renderer = plot.getRenderer();

        if (renderer instanceof StandardXYItemRenderer) {
            final StandardXYItemRenderer rr = (StandardXYItemRenderer) renderer;
            rr.setShapesFilled(true);
            renderer.setSeriesStroke(0, new BasicStroke(1.0f));
            renderer.setSeriesStroke(1, new BasicStroke(1.0f));
        }    
        final DateAxis axis = (DateAxis) plot.getDomainAxis();
        axis.setDateFormatOverride(new SimpleDateFormat("dd:MM")); 
        try{
            final ChartRenderingInfo info = new ChartRenderingInfo
            (new StandardEntityCollection());
            final File file1 = new File("c:/Documents and Settings/accounts/WebApplication2/web/barchart.png");
            ChartUtilities.saveChartAsPNG(file1, chart, 600, 400, info);
        }catch(Exception e){ }

        return chart;
    }
    //data set generation method
    private XYDataset createDataset() {

        final TimeSeriesCollection dataset = new TimeSeriesCollection();
        dataset.setDomainIsPointsInTime(true);

        final TimeSeries s1 = new TimeSeries("Series 1", Minute.class);
        s1.add(new Minute(0, 0, 7, 7, 2003), 10.2);
        s1.add(new Minute(30, 12, 7, 8, 2003), 23.0);
        s1.add(new Minute(15, 14, 7, 9, 2003), 48.0);

        final TimeSeries s2 = new TimeSeries("Series 2", Minute.class);
        s2.add(new Minute(0, 0, 7, 7, 2003), 23.0);
        s2.add(new Minute(30, 12, 7, 8, 2003), 9.0);
        s2.add(new Minute(15, 14, 7, 9, 2003), 36.0);

        dataset.addSeries(s1);
        dataset.addSeries(s2);

        return dataset;
    }
}
%>

但它没有在jsp中显示图像？有什么帮助吗？

Answer 1

首先，这句话不起作用：<img src="/jfree/jsp/Timeseries.jsp" alt="Progress chart" />

我想在这里你的思考过程是JSP会返回一个图像，你可以用html <img ...标签显示图像。好吧，这是不就像一个方法调用，其中某些东西被响应回调用者。

对于HTML，当它加载时，它会尝试找到/jfree/jsp/Timeseries.jsp的文件，假设该文件是jpeg，bmp等图像格式文件。它实际上不会执行服务器上的任何JSP调用。

由于此文件是包含一些字节的简单ascii文件（即使是有效的jsp代码，但不是图像字节）;字节实际上并不代表任何图像。所以HTML无效。

编辑1：无论你想要完成什么，都可以这样做：

创建一个servlet，它将在运行时构建映像，然后将其保存在服务器位置。



测试此应用程序，看看，如果servlet在服务器位置创建图像文件，请说/apps/html/images/yourImage.jpg。



确保图片位置是html可以访问的位置。对于timebeing生成图像在同一目录中   HTML。



生成图像后，您可以使用图像编辑器打开图像，在图像编辑器中设置相同的图像名称（具有相对位置）   HTML



编辑servlet代码以添加重定向代码，以便servlet将您重定向到html页面。



由于加载HTML时，图片已经存在，您的HTML应该可以正常工作。

我希望这一步能实现你的目标。

Answer 2

如果我正确理解您的问题，您正在使用JfreeChart创建图表图像，并想在您的某个JSP上显示此图表图像？最近，我与JFreeChart库合作，为网站用户创建了大量用于案例研究和分析的图表。如果这是要求尝试下面的事情：

创建图表并另存为png到web-root文件夹中的任何文件夹你的网络应用程序。（如果需要，存储创建的图像的名称相应地在db中）
在您的jsp使用图片代码中，只需提供所需的路径即可带有图像名称的图像，包括您的上下文路径。

修改：代码中的以下行会自动将图表保存为png图像。因此无需担心保存图像。只需给出正确的路径，您必须将图表保存为图像。给我20分钟我将保留整个代码。

JFreeChart chart = fm.createChart(fm.dataset);
 ChartUtilities.saveChartAsPNG(image, chart, 500, 400);

编辑2 ：假设您的应用程序的web-root文件夹中有一个文件夹名称“Images” 现在下面的代码将给出我的Images文件夹的路径（包括我的应用程序的上下文路径），如果“Images_folder”在“Images”中不可用，它将创建一个具有此名称的新文件：

 //Get the servers upload directory real path name
                        String filePath = req.getRealPath("/Images");

                        //create the chart_folder folder if do not exists...
                        File folder = new File(filePath);
                        if(!folder.exists())
                         {
                           folder.mkdir();
                         }

现在使用下面的代码，我将使用此路径以使用所需名称保存我的图表图像，并在请求属性中保留带有图表图像名称的整个路径，以便在我的JSP页面上获取它（您可以根据您的要求进行操作，即使用ServletContext.getContextPath()+"/Images/chart_folder"+<your image name her>等。）：

  path=filePath+"/chart_folder";
 ChartUtilities.saveChartAsPNG(new File(path +"/chart3.png"), chart ,no, 400);
                         filePath= path+"\\chart3.png";
                         req.setAttribute("graph_path3",filePath);

现在，在JSP中，您可以获得带有图像名称的整个路径，以便在标记中显示图像。

任何进一步的查询都可以随意ping。

Answer 3

可能是下面一行发生错误。

FileInputStream fileInStream = new FileInputStream(image);

使用image.exist()首先检查图像是否存在。因为它对静态图像工作正常，所以我们将继续前进。

Answer 4

这可能，而且非常简单。您可以使用以下标记设置JSP页面的响应类型：

<%@page contentType="image/png" pageEncoding="UTF-8"%>

此外，无需将这些图表保存到服务器的文件系统中。可以使用ImageIO类将它们直接写入响应的输出流。这是一个示例JSP页面，我将其命名为Chart.jsp：

<%@page import="javax.imageio.*"%>
<%@page import="org.jfree.data.xy.*"%>
<%@page import="org.jfree.chart.*"%>
<%@page import="java.awt.image.*"%>
<%@page contentType="image/png" pageEncoding="UTF-8"%>
<%
    DefaultXYDataset data = new DefaultXYDataset();
    data.addSeries("Set 1", new double[][] {
        {1,  2,  4,  5,  6,  7}, 
        {0, 10, 20, 30, 20, 10}
    });
    JFreeChart chart = ChartFactory.createXYLineChart("Title", "X Label", "Y Label", data);
    BufferedImage bi = chart.createBufferedImage(640, 480);
    ImageIO.write(bi, "png", response.getOutputStream());
%>

这里是index.html引用它：

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <style>body { text-align: center; }</style>
    </head>
    <body>
        <h1>A Chart:</h1>
        <img src="Chart.jsp" alt="Chart" />
    </body>
</html>

这就是结果：

Chart

如何使用jsp调用在html中显示图像？

4 个答案: