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>

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

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}"/>

享受

Answer 2

无需实现新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>

Answer 3

建议使用solution to this question here。

长话短说，您可以使用getImageSrc的{{1}}方法来获取图像URI。

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

getImageSrc

我们需要在托管bean中使用一种方法，使我们能够使用public class GraphicImageRendererXtension extends GraphicImageRenderer { // publish the protected GraphicImageRenderer#getImageSrc method: public String getPublicImageSrc(FacesContext context, GraphicImage image) throws Exception { return getImageSrc(context, image); } }方法：

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以获取Uri：

myBean.getImgUri

获取<p：graphicimage>的具体URL返回StreamedContent </p：graphicimage>

3 个答案: