使用javascript从primefaces的galleria组件保存图像

Question

我正在使用jsf 2.2 primefaces 6.0并且我已经实现了一个用galleria primefaces组件显示图像的解决方案。现在的问题是我正在寻找解决方案，通过一个按钮使用javascript从galleria下载图像。（remarque i'是一个初学程序员，从未使用过js）

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>

Answer 1

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

Answer 2

（这里是工作解决方案）：在每个galleria组件上都有一个下载按钮，以便下载显示的每个图像。

这个解决方案非常容易实现，只需在galleria组件上添加JavaScript代码和命令，如下所示：

这里是galleria的xhtml代码：

<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代码：

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

这里假设的图片结果：[ ]