JSF 更新 h:graphicImage答案

【问题标题】：JSF updating h:graphicImageJSF 更新 h:graphicImage
【发布时间】：2014-09-02 18:20:27
【问题描述】：

我正在使用 primefaces 的 poll 每 n 秒更新一次图像。我现在正在两张图片之间切换，以确保它正常工作。现在我要做的是显示未存储在服务器上的图像。我写了一门课，每隔 n 秒拍一张照片。我不想将它保存到磁盘以减少 IO。所以我想做类似下面的流程

@ManagedBean
@ViewScoped
public class myClass implements Serializable {
  public Object getImage() {
    Object newImage = MyClass.takePhoto();
    return newImage;
  }

  public void increment() {
  }
}

XHTML：

<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:p="http://primefaces.org/ui">
    <h:head></h:head>
    <h:body>
      <h:form>
        <h:graphicImage value="#{myClass.image}" id="img" cache="false"/>
        <p:poll interval="1" listener="#{myClass.increment}" update="img" />
      </h:form>
    </h:body>
</h:html>

所以我的问题是，是否可以以与上面的伪代码类似的方式将 Image 对象返回给 h:graphicImage？

【问题讨论】：

标签： jsf-2 primefaces

【解决方案1】：

是的，请尝试使用 Primefaces StreamedContent 类向图形图像提供流，而不是对象。

类似：

public StreamedContent getImageStream() {

    ByteArrayOutputStream os = new ByteArrayOutputStream();
    ImageIO.write(myBufferedImage, "png", os);
    InputStream is = new ByteArrayInputStream(os.toByteArray());
    return new DefaultStreamedContent(is, "image/png");

}

然后在您的 JSF 页面中：

<p:graphicImage value="#{myController.imageStream}" cache="false"/>

注意这里使用的是 p:graphicImage，而不是 h:graphicImage。

【讨论】：

太棒了，谢谢！！！最后一个问题，更新之间闪烁非常糟糕，有什么简单的解决方法吗？
闪烁是因为网页加载图像的速度不够快？您在这里每秒刷新一次图像，多久拍摄一次新照片？
现在是每秒，但我可能会将其移至 2 或 3 秒。我不需要“实时”，否则我只会打开一个视频流。
然后——即使刷新率为 6 秒，在照片之间切换时它仍然会“闪烁”。只是一个快速关闭/打开的东西。
不确定我真的能帮上忙。我想你可以编写一些javascript来重叠图像并在加载后切换可见性。所有浏览器都存在这个问题吗？