3

https://www.primefaces.org/showcase/ui/multimedia/photoCam.xhtmlで説明されているとおりに、primefaces photoCam コンポーネントを使用してい ます。残念ながら、ショーケースの私の photoCam の例とは異なり、私のものはレンダリングされません。Firefox と Chrome で試してみましたが、コードは次のとおりです。

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

<h:form>  
<h:panelGrid columns="3">  
    <p:photoCam widgetVar="pc" listener="#{photoCamBean.oncapture}" update="photos"/>  

    <p:commandButton type="button" value="Capture" onclick="pc.capture()"/>  

    <p:imageSwitch effect="zoom" id="photos">  
        <ui:repeat value="#{photoCamBean.photos}" var="photo">  
            <p:graphicImage value="/photocam/#{photo}.png" />  
        </ui:repeat>  
    </p:imageSwitch>  
</h:panelGrid>  
</h:form>

</ui:composition>

そして、豆

@ManagedBean
@ViewScoped
public class PhotoCamBean {  

private List<String> photos = new ArrayList<String>();

private String getRandomImageName() {
            int i = (int) (Math.random() * 10000000);

            return String.valueOf(i);
    }

public List<String> getPhotos() {
    return photos;
}    

public void oncapture(CaptureEvent captureEvent) {
    String photo = getRandomImageName();
    this.photos.add(0,photo);
    byte[] data = captureEvent.getData();

            ServletContext servletContext = (ServletContext) FacesContext.getCurrentInstance().getExternalContext().getContext();
            String newFileName = servletContext.getRealPath("") + File.separator + "photocam" + File.separator + photo + ".png";

            FileImageOutputStream imageOutput;
            try {
                    imageOutput = new FileImageOutputStream(new File(newFileName));
                    imageOutput.write(data, 0, data.length);
                    imageOutput.close();
            }
    catch(Exception e) {
                    throw new FacesException("Error in writing captured image.");
            }
}

}

Primefaces ショーケースの photoCam は、adobe フラッシュ確認ウィンドウでキャンバスをレンダリングしますが、私はそうしません。ここで何が欠けていますか?

4

1 に答える 1

1

ページの head セクションに meta タグを追加すると、次のように問題が解決されます。

<ui:composition xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:p="http://primefaces.org/ui">

<h:head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</h:head>

<h:form>  
<h:panelGrid columns="3">  
<p:photoCam widgetVar="pc" listener="#{photoCamBean.oncapture}" update="photos"/>  

<p:commandButton type="button" value="Capture" onclick="pc.capture()"/>  

<p:imageSwitch effect="zoom" id="photos">  
    <ui:repeat value="#{photoCamBean.photos}" var="photo">  
        <p:graphicImage value="/photocam/#{photo}.png" />  
    </ui:repeat>  
</p:imageSwitch>  
</h:panelGrid>  
</h:form>
</ui:composition>

メタタグを追加するだけで、Adobe Flash 確認ウィンドウでキャンバスを表示できました。ご協力いただきありがとうございます。

于 2013-01-02T04:25:36.457 に答える