2012-03-23 114 views
0

我想用一個簡單的變化來複制https://www.primefaces.org/showcase/ui/multimedia/photoCam.xhtml的示例。PrimeFaces的Photocam:顯示捕獲的圖像

在此示例中,每個拍攝的照片都會保存並顯示。

但我只需要顯示最新的一個,所以我刪除了列表引用並編輯了一些代碼。

所以我使用的只是graphicsImage而不是imageSwitch,並且在onCapture方法中我只是覆蓋了上一張圖片。

但這是問題所在。

新圖像被正確拍攝,我可以通過瀏覽到它的文件夾來看到它,但它不會在頁面中更新。 它似乎仍然顯示以前的緩存的一個,因爲如果它是第一個(在此之前沒有文件)它會起作用。

有什麼建議嗎?編輯: 這裏有一些代碼。

PrimeFaces JSF

<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> 

MY JSF

<p:photoCam widgetVar="pc" listener="#{registerBean2.onCapture}" update="photo"/> 
    <p:commandButton type="button" value="Capture" onclick="pc.capture()" update="photoPanel"/> 
    <p:panel id="photoPanel"> 
     <p:graphicImage value="./uploaded/temp/#{registerBean2.utente.username}.png" id="photo"> 
      <p:effect type="pulsate" event="load" delay="500"> 
       <f:param name="mode" value="'show'" /> 
      </p:effect> 
     </p:graphicImage> 
    </p:panel> 

PRIMEFACES BEAN

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."); 
    } 
} 

MY BEAN

public void onCapture(CaptureEvent captureEvent) { 
    makeAvatar(captureEvent.getData()); 
} 

private void makeAvatar(byte[] imageData) { 
    FileImageOutputStream imageOutput; 
    ExternalContext extContext = FacesContext.getCurrentInstance().getExternalContext(); 
    File imageFile = new File(extContext.getRealPath("NEW//uploaded//temp") + "//" + utente.getUsername() + ".png"); 
    try { 
     if (imageFile.exists()) { 
      imageFile.delete(); 
     } 
     imageFile.createNewFile(); 
     imageOutput = new FileImageOutputStream(imageFile); 
     imageOutput.write(imageData, 0, imageData.length); 
     imageOutput.close(); 
     FacesMessage msg = new FacesMessage("Immagine caricata correttamente."); 
     FacesContext.getCurrentInstance().addMessage(null, msg); 
    } catch (Exception e) { 
     FacesMessage msg = new FacesMessage("Errore nel caricamento dell'immagine!"); 
     FacesContext.getCurrentInstance().addMessage(null, msg); 
    } 
} 

圖像在我的臨時文件夾中被捕獲和更新,但不會在頁面中更改。 即使刷新也不會幫助我。 只有在服務器重新啓動後纔會更改!

編輯: 這是我與GlassFish的web.xml

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE glassfish-web-app PUBLIC "-//GlassFish.org//DTD GlassFish Application Server 3.1 Servlet 3.0//EN" "http://glassfish.org/dtds/glassfish-web-app_3_0-1.dtd"> 
<glassfish-web-app error-url=""> 
    <class-loader delegate="true"/> 
    <jsp-config> 
     <property name="keepgenerated" value="true"> 
      <description>Keep a copy of the generated servlet class' java code.</description> 
     </property> 
     <property name="alternatedocroot_1" value="from=/uploads/* dir=/home/stefano/Documenti/UniLife" /> 
    </jsp-config> 
</glassfish-web-app> 

使用丹尼爾的解決方案,我已經能夠瀏覽到本地主機:8080/Unilife5戰/上傳/頭像/ cp99.png要顯示/home/stefano/Documenti/UniLife/avatar/cp99.png,或者我出錯了?

+1

這是否有幫助,http://stackoverflow.com/a/9674671/617373? – Daniel 2012-03-24 19:00:06

+0

這似乎是正確的方式,但不知何故,它不工作! 我已將我的glassfih-web.xml添加到第一篇文章。 – StepTNT 2012-03-24 19:19:43

回答

0

不熟悉GlassFish在好...但一開始我會使用由BalusC

PrimeFace update after upload

<property name="alternatedocroot_1" value="from=/uploads/* dir=/var/webapp" /> 

And use http://localhost:8080/contextname/uploads/* to serve those uploaded images from by 

<h:graphicImage> the usual way. 

沒有其他的文件夾內給出最簡單的例子像

stefano/Documenti/UniLife/avatar/

你有沒有改變你的bean代碼?

File imageFile = new File(extContext.getRealPath("NEW//uploaded//temp") + "//" + utente.getUsername() + ".png"); 
+0

再次感謝,但http:// localhost:8080/contextname/uploads /給我一個404錯誤。我想_contextname_是一個參數,但我已經嘗試了所有的組合而沒有成功。我會關閉這個問題,因爲主題被改變,我會打開一個新的問題! – StepTNT 2012-03-24 20:57:33

+0

我以爲contextname意思是你的web應用名localhost:8080/yourWebAppName/uploads不是嗎? – Daniel 2012-03-24 21:12:13

+0

這就是我的想法,但它不工作..我有一個文件f.txt在/ var/webapp和http:// localhost:8080/Unilife5-war/uploads/f.txt顯示一個404錯誤! – StepTNT 2012-03-25 12:31:59

相關問題