使用 javascript 从 primefaces 的 Galleria 组件中保存图像答案

【问题标题】：saving images from galleria component of primefaces with javascript使用 javascript 从 primefaces 的 Galleria 组件中保存图像
【发布时间】：2017-06-28 15:55:25
【问题描述】：

我正在使用 jsf 2.2 primefaces 6.0，并且我已经实现了使用 Galleria primefaces 组件显示图像的解决方案。现在的问题是我正在尝试找到通过使用 javascript 的按钮从 Galleria 下载图像的解决方案。（ remarque我是一个初学者程序员，从未使用过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>

【问题讨论】：

" 但它不起作用或我无法实现它。" 这就像描述问题的最终用户。像开发人员一样接近它。发生了什么事，你看到按钮出现了吗？函数被调用了吗？请缩小问题范围。在没有我们要求各种澄清的情况下，现在可以广泛/不清楚

标签： javascript primefaces jsf-2.2

【解决方案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>

【讨论】：

然后你会再次调用服务器（下载（...）实际上做了什么？）问题中的 javascript 代码将从缓存中检索它（如果实现正确）
实际上是stackoverflow成员之一提出了我的这个解决方案，它在我的应用程序上运行良好。我只是对JSF组件和java有所了解。我对JS一无所知

【解决方案2】：

（这里是可行的解决方案）：在每个 Galleria 组件上都有一个下载按钮，用于下载显示的每个图像。

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

这里是画廊的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>

这是图片中的假定结果： []

【讨论】：