Jsf 如何使用PrimeFaces图表导出图像文件_Jsf_Primefaces_Jsplumb

Jsf 如何使用PrimeFaces图表导出图像文件

jsf primefaces

Jsf 如何使用PrimeFaces图表导出图像文件,jsf,primefaces,jsplumb,Jsf,Primefaces,Jsplumb,我在用素面。我想从该组件获取图像（如png）我怎么做我试过了，但是我不能得到相同的图像。我也试过，但不好我的代码如下 DiagramShowView.java package //omitted; import // omitted import org.primefaces.model.diagram.DiagramModel; @Named @ViewScoped public class DiagramShowView implements Serializable {

我在用素面。我想从该组件获取图像（如png）

我怎么做

我试过了，但是我不能得到相同的图像。我也试过，但不好

我的代码如下

DiagramShowView.java

package //omitted;

import // omitted
import org.primefaces.model.diagram.DiagramModel;

@Named
@ViewScoped
public class DiagramShowView implements Serializable {

    @Getter
    private DiagramModel flow;

    public void init(){
        this.flow = createDiagramModel(); // omitted createDiagramModel() impementation.
    }
}

Diagram.xhtml

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets" xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">
<h:head></h:head>
<f:metadata><f:viewAction action="#{diagramShowView.init()}"/></f:metadata>
<h:body>
    <h:form id="mainForm">
        <style type="text/css">
            .ui-diagram-element {
                border: 0.1em dotted #d4e06b;
                width: 14em;
                height: 4em;
                line-height: 4em;
                text-align: center;
            }
        </style>
        <div class="ui-g">
            <div class="ui-g-6">
                <p:diagram value="#{diagramShowView.flow}" style="width:100%;height:500px;" id="flow"
                           styleClass="ui-widget-content" var="el">
                    <f:facet name="element">
                        <h:outputText value="#{el}"
                                      style="display:block;margin-top:0.5em;"/>
                    </f:facet>
                </p:diagram>
            </div>
            <div class="ui-g-6">
                <p id="copy"/>
            </div>
        </div>
        <script type="text/javascript" src="https://html2canvas.hertzen.com/dist/html2canvas.js"></script>
        <script type="text/javascript" src="https://canvg.github.io/canvg/demo/v2/canvg.js"/>
        <script type="text/javascript">
            let el = document.getElementById("mainForm:flow");
            html2canvas(document.getElementById("mainForm:flow"), {
                width: el.scrollWidth,
                height: el.scrollHeight
            }).then(function (canvas) {
                // this code copy from github issue
                ctx = canvas.getContext('2d');
                $flows = $('> svg', el);
                $flows.each(function () {
                    $svg = $(this)
                    offset = $svg.position();
                    svgStr = this.outerHTML;
                    ctx.drawSvg(svgStr, offset.left, offset.top);
                });
                $endpoints = $('._jsPlumb_endpoint > svg', el);
                $endpoints.each(function () {
                    $svg = $(this)
                    offset = $svg.parent().position();
                    svgStr = this.outerHTML;
                    ctx.drawSvg(svgStr, offset.left, offset.top);
                });
                // end of copy code.

                document.getElementById("copy").appendChild(canvas);
            });
        </script>
    </h:form>
</h:body>
</html>


.ui图表元素{
边框：0.1米虚线#d4e06b；
宽度：14em；
高度：4em；
线高：4em；
文本对齐：居中；
}

让el=document.getElementById（“mainForm:flow”）；
html2canvas（document.getElementById（“mainForm:flow”）{
宽度：el.scrollWidth，
高度：海拔高度
}).then（功能（画布）{
//此代码是从github复制的
ctx=canvas.getContext（'2d'）；
$flows=$（'>svg'，el）；
$flows.each（函数（）{
$svg=$（此）
偏移量=$svg.position（）；
svgStr=this.outerHTML；
ctx.drawSvg（svgStr，offset.left，offset.top）；
});
$endpoints=$（'._jsplump_endpoint>svg'，el）；
$endpoints.each（函数（）{
$svg=$（此）
偏移量=$svg.parent（）.position（）；
svgStr=this.outerHTML；
ctx.drawSvg（svgStr，offset.left，offset.top）；
});
//复制代码结束。
document.getElementById（“副本”）.appendChild（画布）；
});

下面是浏览器输出。左边的组件由jsf修改。 html2canvas和canvg.js使用了正确的组件

我能自己解决一个部分。原因是图像需要更大的区域。答案在下面的帖子中

和“但我无法获得清晰的图像”是什么意思？例子？解释？对不起。我添加了详细代码。