无法使用 h:graphicImage JSF 2.0 显示图像

Posted 2023-02-23

【中文标题】无法使用 h:graphicImage JSF 2.0 显示图像

【英文标题】：Can't display image with h:graphicImage JSF 2.0

【发布时间】：2014-09-03 06:13:46

【问题描述】：

我编写了一个从网络摄像头拍摄照片的 bean。我想在 JSF 2.0 页面中显示这些图像并每隔 n 秒更新一次。

如果我像这样在 Eclipse 中为文件提供路径名，它可以工作：

public String getNewPhoto() 
        try 
            File dir = new File("C:/Users/User/MyApp/images/");
            FileUtils.cleanDirectory(dir);
        catch(Exception ex) 
            ex.printStackTrace();
        

    String timeStamp = new SimpleDateFormat("yyyyMMdd_HHmmss").format(Calendar.getInstance().getTime());

    try 
        webcam = Webcam.getDefault();
        webcam.open();
        ImageIO.write(webcam.getImage(), "PNG", new File("C:/Users/User/MyApp/images/"+ timeStamp + ".png"));
        webcam.close();
    catch(Exception ex) 
        ex.printStackTrace();
    

    return "C:/Users/User/MyApp/images/" + timeStamp + ".png"; 

使用以下 Xhtml：

      <p:graphicImage value="#myBean.newPhoto" id="photo" cache="false" />
      <p:poll interval="1" listener="#myBean.increment" update="photo" />

正如预期的那样，在我的 Eclipse 开发环境中，上述所有操作都可以正常工作。我想将此部署到我的服务器（Linux）。当我将您在上面看到的路径更改为

/var/lib/tomcat7/webapps/MyApp/images

然后图像被保存，但我无法在 h:graphicImage 中显示它们。我也尝试过：

http://hostname:8080/MyApp/images/....

到 h:graphicImage 仍然没有骰子，我确定我错过了一些真正简单的东西。任何帮助表示赞赏！

【参考方案1】：

您还需要在图像保存行中更改它。 . .

ImageIO.write(webcam.getImage(), "PNG", new File("C:/Users/User/MyApp/images/"+ timeStamp + ".png"));

【讨论】：

我确实更改了保存图像的位置。以上只是我的开发环境中的示例代码，我已将您在上面看到的任何地方的路径更改为我的服务器的正确位置。

【参考方案2】：

以下内容如何：

查看

<p:graphicImage value="#photoBean.newPhoto" id="photo" cache="false" />
<p:poll listener="#photoBean.updatePhoto" interval="1"
    update="photo" />

托管 Bean

@ManagedBean
@RequestScoped
public class PhotoBean 

    private String realPath;
    private String realtivePath;

    @PostConstruct
    public void init() 
        realtivePath = "/images/webcam.png";
        ExternalContext externalContext = FacesContext.getCurrentInstance()
                .getExternalContext();
        realPath = externalContext.getRealPath(realtivePath);
    

    public void updatePhoto() 
        try 

            File file = new File(realPath);
            file.delete(); // cleanup
            // Use file object to write image...

         catch (IOException e) 
            // Implement some exception handling here
            e.printStackTrace();
        
    

    public String getNewPhoto() 
        return realtivePath;
    

更多注释（getter）

在 getter (getNewPhoto) 中处理网络摄像头图像不是一个好主意，因为 JSF 可能会多次调用 getter。

见：Why JSF calls getters multiple times

时间戳

我已经从文件名中删除了时间戳。我认为您已添加它以防止浏览器缓存。这不是必需的，因为 cache=false 已经创建了唯一的图像 URI。