获取返回StreamedContent的<p:graphicImage>的具体URL

Question

为了使用灯箱效果，我需要一个由<p:graphicImage>生成的图片链接。

最终，HTML应该如下所示：

<a href="image.jpg" data-lightbox="bilder">
  <img src="image.jpg" />
</a>

这是我目前为止的JSF尝试：

<h:outputLink data-lightbox="bilder" value="???">
  <p:graphicImage value="#{imageStreamer.image}">
    <f:param name="imageId" value="#{gameReader.game.cover.id}"/>
  </p:graphicImage>
</h:outputLink>

我如何获取返回StreamedContent的<p:graphicImage>的具体URL，以便在我的链接中使用？

- Lukas Eichler

---

好问题。作为一个快捷解决方法，你可以轻松使用JS来实现这个功能。顺便提一下，PrimeFaces已经有一个<p:lightBox>组件了，无需使用第三方库。 - BalusC

Answer 1

这有一个解决方案 - 使用servlet，这是一个适用于任何JSF应用程序的servlet。

package com.dossier.web.handlers;

//~--- non-JDK imports --------------------------------------------------------



import com.dossier.backend.services.mongo.FileService;
import com.mongodb.gridfs.GridFSDBFile;

//~--- JDK imports ------------------------------------------------------------

import java.io.*;

import javax.faces.context.FacesContext;
import javax.servlet.ServletException;
import javax.servlet.SingleThreadModel;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import org.apache.commons.io.IOUtils;

/**
 *
 * @author Armen Arzumanyan
 */
@WebServlet(urlPatterns = { "/PreviewImage" })
public class PreviewImage extends HttpServlet implements SingleThreadModel {
    private static final long serialVersionUID = -6624464650990859671L;
    private FileService       fileAction       = new FileService();

    @Override
    public void init() throws ServletException {
        super.init();
    }

    @Override
    protected void doGet(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        doPreviewImage(request, response);
    }

    @Override
    protected void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {}

    private void doPreviewImage(HttpServletRequest request, HttpServletResponse response) throws IOException {
        FacesContext context   = FacesContext.getCurrentInstance();
        String       fileIdStr = request.getParameter("fileId");
        String       widthStr  = request.getParameter("w");
        GridFSDBFile file      = null;
        int          width     = 0;

        if ((widthStr != null) && (widthStr.length() > 0)) {
            try {
                width = Integer.parseInt(widthStr);
            } catch (NumberFormatException e) {}
        }

        if (fileIdStr != null) {
            if (fileAction != null) {
                file = fileAction.getFile(fileIdStr.trim());
            }

            if (file != null) {
                byte[] content = IOUtils.toByteArray(file.getInputStream());

                if (content != null) {
                    String mimeType = file.getContentType();

                    response.addHeader("Pragma", "cache");
                    response.addHeader("Cache-Control", "max-age=3600, must-revalidate");
                    response.addDateHeader("Expires", System.currentTimeMillis() + 1000 * 3600 * 10);
                    response.setContentType(mimeType);

                    try {
                        if (((mimeType != null)
                                && (mimeType.equalsIgnoreCase("image/gif") || mimeType.equalsIgnoreCase("image/x-png")
                                    || mimeType.equalsIgnoreCase("image/png") || mimeType.equalsIgnoreCase("image/jpg")
                                    || mimeType.equalsIgnoreCase("image/jpeg"))) || (width == 0)) {
                            response.getOutputStream().write(content);
                        } else {

//                          ByteArrayInputStream bi = new ByteArrayInputStream(content);
//                          InputStream thumbStream = scaleImageJPG(bi, width);
//                          byte[] thumbContent = new byte[thumbStream.available()];
//                          thumbStream.read(thumbContent);
                            response.getOutputStream().write(content);
                        }
                    } catch (IOException e) {

                        // log.error("file content send error");
                        e.printStackTrace();
                    } catch (Exception e) {

                        // log.error("file exception: " + e);
                        e.printStackTrace();
                    } finally {
                        content = null;
                        file    = null;
                    }

                    return;
                }
            } else {

                // TODO add page not found
                response.addHeader("Pragma", "no-cache");
                response.addDateHeader("Expires", System.currentTimeMillis() - 1000 * 3600);

                try {
                    response.getWriter().println("file object is null");
                } catch (Exception e) {}

                return;
            }
        }

        // TODO add page not found
        response.addHeader("Pragma", "no-cache");
        response.addDateHeader("Expires", System.currentTimeMillis() - 1000 * 3600);

        try {
            response.getWriter().println("file id is not set");
        } catch (Exception e) {}

        // log.debug("file ID parameter is not set or file is not found");
        return;
    }

    // </editor-fold>
}


//~ Formatted by Jindent --- http://www.jindent.com

这里是一个网页代码

<h:graphicImage id="primage" styleClass="img-rounded img-responsive"
                                                                url="/PreviewImage?w=250&amp;fileId=#{updatePersonBean.person.imageId}"
                                                                width="250" rendered="#{updatePersonBean.person.imageId != null}"/>                                              
                                                <h:graphicImage id="primagenew" styleClass="img-rounded img-responsive"
                                                                url="/resources/img/userpic_simple.gif"
                                                                width="250" rendered="#{updatePersonBean.person.imageId == null}"/>

享受

- Armen Arzumanyan

---

这是一个解决方案，但我正在寻找不需要额外servlet的东西。 - Lukas Eichler

没有其他解决方案，任何其他解决方案都将基于servlet，因为整个JSF也是基于servlet的，任何Java Web应用程序都应该使用某种类型的servlet，这个解决方案我在很多项目中都使用过。 :) - Armen Arzumanyan

Answer 2

已经在此问题中提出了解决方案的建议。

简而言之，您可以使用GraphicImageRenderer的getImageSrc方法来获取图像URI。

第一步是扩展GraphicImageRenderer以发布受保护的getImageSrc方法：

public class GraphicImageRendererXtension extends GraphicImageRenderer {
    // publish the protected GraphicImageRenderer#getImageSrc method:
    public String getPublicImageSrc(FacesContext context, GraphicImage image) throws Exception {
        return getImageSrc(context, image);
    }
}

我们需要在托管的Bean中添加一个方法，使我们能够使用getPublicImageSrc方法：

public class MyBean {
  // ...
  public String getImgUri(GraphicImage imgComponent) throws Exception {
    assert null != imgComponent;
    String imgUri = new GraphicImageRendererXtension().getPublicImageSrc(FacesContext.getCurrentInstance(),
                imgComponent);
    return imgUri;
  }
}

最后，我们将p:graphicImage组件绑定到任意变量，并调用myBean.getImgUri以获取任何目的的URI：

<h:outputLink value="#{myBean.getImgUril(myImage)}">
        <p:graphicImage binding="#{myImage}" value="#{myBean.img}" />
</h:outputLink> 

- Selaron

Answer 3

一种不需要实现新bean的简单方法是通过输出一个不可见的graphicImage并使用Javascript复制URL：

<h:form id="myForm">
    <p:graphicImage id="urlOutputter" value="#{MyForm.image}" style="display: none;"/>
    <span id="imageData" data-image="***URL HERE***"/>
    <script>
        var url = document.getElementById("myForm:urlOutputter").src;
        document.getElementById("imageData").setAttribute("data-image", url);
    </script>

- Matthias Ronge