使用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的组合图像

回答

相关问题