如何导出图像文件使用PrimeFaces图[复制]
我正在使用PrimeFaces的图表组件。我想从该组件获取图像（如png）。
我怎么做？
我尝试了html2画布和画布，但我不能得到相同的图像。我也尝试https://github.com/jsplumb/jsPlumb/issues/35#issuecomment-82196174，但不好。
我的代码如下。
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>
下面是浏览器输出。左边的组件由jsf修改。html2canvas和canvg使用了正确的组件。js。
共有1个答案
我能够自己解决一个部分。原因是图像需要更大的面积。答案在下面的帖子里。
HTML2Canvas不呈现完整div，只呈现屏幕上可见的内容？
-
问题内容： 我一直试图将Excel中的图表导出为Python中的图像文件（JPG或ING）。我正在看WIn32com。这是我到目前为止所拥有的。 这就是我被困住的地方。我现在需要将所选范围复制到文件中。对文档的任何帮助或指导都可以对我有很大帮助。 我已经基于以下VBA脚本对以上代码进行了建模： 来自以下代码段：http：//vbadud.blogspot.com/2010/06/how-to-sa
-
这个问题涉及一个运行在Ubuntu12.04上的Eclipse Kepler实例。我有一个用例图，我需要将它作为图像文件包含在文档中。我右键点击.di文件，选择导出所有图...然后选择PDF作为文件格式。作为回报,我将得到一个错误窗口,其中包含以下内容： 会话数据: eclipse.buildid=4.3.2.M20140221-1700 java.version=1.6.0_26 java.ve
-
我在Eclipse中有一个Java项目。这是文件夹结构： 代码包位于src中，所有图像都位于res文件夹中。 代码中的图像参照如下： 但是，在我将项目导出到JAR文件后（通过使用导出- 所有图像都在根文件夹中，无法正确引用。如何正确地引用这些图像，使它们在Eclipse和导出的JAR中都可见？
-
我正在处理一个java项目，我想把它导出到一个可运行的jar文件。这个项目有一个带有几个背景图像的GUI，当我用我的项目文件夹中的图像在eclipse中运行它时，它可以工作，但是当我试图将它导出到一个jar时，在cmd上运行时，我得到以下异常：javax.imageio.iioException：无法读取输入文件！ 我已经尝试将我的图像移动到项目中的各个地方，试图将它们包含在jar中，即使这样也没
-
我编写了以下简单的C#控制台应用程序，用于从Excel工作簿导出所有图表。它工作正常，除非打开文档后图表没有滚动到，在这种情况下会生成一个空的图像文件。 我尝试了几次滚动到该对象的失败尝试；程序底部注释掉的行（
-
我正在将图像保存到tar文件中，如下所示 < code>docker保存我的图像:最新 但是构建失败了。有人能帮我一下吗？如何在Dockerfile中发送tar文件？