使用javascript保存圖像從primefaces的組合圖像

我使用的是jsf 2.2 primefaces 6.0，我已經實現了一個解決方案來顯示圖像與圓頂場所primefaces組件。現在的問題是我triying找到解決方案來下載圖像（remarque我是一個初學者程序員，從來沒有使用js）使用javascript保存圖像從primefaces的組合圖像

其中一個stackoverflow成員給了我一個代碼，但它不起作用，或者我無法實現它。

這裏的XHTML代碼：

<p:galleria value="#{demandeBean.demandeSelectionnee.images}" 
         panelWidth="500" panelHeight="313" showCaption="false" 
         autoPlay="false" var="image"> 
         <p:graphicImage 
          value="http://localhost:18080/openCars/images/#{image}" 
          width="500" height="313" /> 
        </p:galleria>

這裏所提出的解決方案與JS：

<script type="text/javascript"> 
function download() { 
    $('.ui-galleria-panel img').each(function() { 
    $(this).after("<a href='"+ $(this).attr('src') +"' download='nameOfImage.jpg' class='ui-button' style='position: absolute;right: 0;top: 0; padding: 5px 10px;background:rgba(255,255,255,0.7);'><i class='fa fa-download'></i></a>") 
}); 
</script>

來源

2017-06-28 user8225636

_「但它不起作用或者我無法實現它。」_這就像描述問題的最終用戶。像開發人員那樣對待它。發生了什麼，你看到按鈕出現了嗎？函數是否被調用？請縮小問題範圍。如果沒有我們要求各種澄清，現在我們需要廣泛/不清楚的方式 – Kukeltje

附上您的p:graphicImage內p:commandLink

<p:galleria value="#{demandeBean.demandeSelectionnee.images}" panelWidth="500" panelHeight="313" showCaption="false" 
         autoPlay="false" var="image"> 
    <p:commandLink action="#{demandeBean.download(image.id)}"> 
     <p:graphicImage value="http://localhost:18080/openCars/images/#{image}" width="500" height="313" /> 
    </p:commandLink> 
</p:galleria>

來源

2017-06-29 06:59:56 Fritz

然後您再次調用服務器（以及下載（...）實際上做了什麼？）問題中的JavaScript代碼將從緩存（如果實施正確） – Kukeltje

其實stackoverflow成員之一提出了我的這個解決方案，它的工作正常我的應用程序。我只知道JSF組件和java.I沒有關於JS – user8225636

（這裏的工作解決方案）：在每個環球免稅店組件上都有一個下載按鈕下載顯示的每個圖像。

該解決方案是很容易實現剛纔添加的廣場組成如下的JavaScript代碼和指令：

<p:dialog header="Documents numérisés" widgetVar="diag" modal="true" 
       dynamic="true" showEffect="fade" hideEffect="fade" resizable="true" 
       position="center" id="diagImages" onShow="download()"> 
       <p:outputPanel id="gal" style="text-align:center;"> 
        <p:galleria value="#{demandeBean.demandeSelectionnee.images}" 
         panelWidth="500" panelHeight="313" showCaption="false" 
         autoPlay="false" var="image"> 
         <p:graphicImage 
          value="http://localhost:18080/openCars/images/#{image}" 
          width="500" height="313" /> 
        </p:galleria> 
       </p:outputPanel> 
      </p:dialog>

這裏的js代碼：

在這裏，拱廊的XHTML代碼

<script type="text/javascript"> 
     //<![CDATA[ 
     function download() { 
      $('.ui-galleria-panel img').each(function() { 
        $(this).after("<a href='"+ $(this).attr('src') +"' download='Documents numérisés.jpg' class='ui-button' style='position: absolute;right: 0;top: 0; padding: 5px 10px;background:rgba(255,255,255,0.7);'><i class='fa fa-download'></i></a>") 
       }); 
     } 
     //]]> 
    </script>

這裏假定的結果的圖片： [ Galleria with download button ]

來源

2017-06-29 08:55:51 user8225636

使用javascript保存圖像從primefaces的組合圖像

回答

相關問題