Javascript 如何将Jchartfx svg图表导出到画布
我尝试使用html2canvas.js将jchartfx导出到画布，但它只将其他属性转换为画布，但svg元素显示为空白区域。这是我的密码Javascript 如何将Jchartfx svg图表导出到画布,javascript,html,canvas,svg,html2canvas,Javascript,Html,Canvas,Svg,Html2canvas,我尝试使用html2canvas.js将jchartfx导出到画布，但它只将其他属性转换为画布，但svg元素显示为空白区域。这是我的密码 <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html> <html> <head lang="en"> <meta
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Using an existing canvas to draw on</title>
<style>
canvas {
border: 1px solid black;
}
button {
clear: both;
display: block;
}
#content {
background: rgba(100, 255, 255, 0.5);
padding: 50px 10px;
}
</style>
<link rel="stylesheet" type="text/css" href="css/jchartfx.attributes.css" />
<link rel="stylesheet" type="text/css" href="css/jchartfx.palette.css" />
<script type="text/javascript" src="./js/jchartfx/jchartfx.system.js"></script>
<script type="text/javascript" src="./js/jchartfx/jchartfx.coreVector.js"></script>
<script type="text/javascript" src="./js/jchartfx/jchartfx.advanced.js"></script>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<script type="text/javascript" src="./js/exportLibrary.js"></script>
<style>
.exportChart{}
.exportTable{max-width:700px;border:1px solid blue; margin:2px;}
</style>
<script type="text/javascript" >
var chart1;
function loadChart(){
chart1 = new cfx.Chart();
chart1.setGallery(cfx.Gallery.Pie);
var title;
title = new cfx.TitleDockable();
title.setText("Sample Demo");
chart1.getTitles().add(title);
var divHolder = document.getElementById('ChartDiv1');
PopulateCarProduction(chart1);
chart1.create(divHolder);
}
function PopulateCarProduction(chart) {
var items = [{
"Proportion": 70,
"Month": "Jan"
}, {
"Proportion": 30,
"Month": "Feb"
}];
chart.setDataSource(items);
}
</script>
</head>
<body onload="loadChart()">
<div><h1>HTML content to render:</h1>
<div id="content">
<div class="exportChart" id="ChartDiv1" style="width:600px;height:400px"></div>
<div class="exportTable" id="TableDiv1" style="width:600px;">
<table id="table1" >
<tr><th style="color:#f0f">1Column one</th><th>Column Two</th><th>Column one</th><th>Column Two</th><th>Column Two</th></tr>
<tr><td>Data11</td><td>Data12</td><td>Data11</td><td>Data12</td><td>Data12</td></tr>
<tr><td> Data21</td><td>Data22 </td><td> Data21</td><td>Data22 </td><td>Data22 </td></tr>
<tr><td> Data31</td><td>Data32 </td><td> Data31</td><td>Data32 </td><td>Data32 </td></tr>
</table>
</div>
</div>
</div>
<h1>Existing canvas:</h1>
<canvas width="1000" height="800"></canvas>
<script type="text/javascript" src="tableexport/html2canvas.js"></script>
<button>Run html2canvas</button>
<script type="text/javascript">
var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
document.querySelector("button").addEventListener("click", function() {
html2canvas(document.querySelector("#content"), {canvas: canvas}).then(function(canvas) {
console.log('Drew on the existing canvas');
});
}, false);
</script>
</body>
</html>
使用现有画布进行绘制
帆布{
边框：1px纯黑；
}
钮扣{
明确：两者皆有；
显示：块；
}
#内容{
背景：rgba（100255，255，0.5）；
填充：50px 10px；
}
.exportChart{}
.exportTable{最大宽度：700px；边框：1px纯蓝色；边距：2px；}
var-chart1；
函数loadChart（）{
chart1=新的cfx.Chart（）；
图1.setGallery（cfx.Gallery.Pie）；
var标题；
title=新的cfx.TitleDockable（）；
title.setText（“示例演示”）；
chart1.getTitles（）.add（标题）；
var divHolder=document.getElementById（'ChartDiv1'）；
人口生产（图1）；
图1.创建（股东）；
}
函数PopulateCarProduction（图表）{
可变项目=[{
“比例”：70，
“月”：“一月”
}, {
“比例”：30，
“月”：“二月”
}];
图表.setDataSource（项目）；
}
要呈现的HTML内容：
1列1列2列1列2列2列2
数据11数据12数据11数据12数据12
Data21Data22 Data21Data22 Data22
Data31Data32 Data31Data32 Data32
现有画布：
运行html2canvas
var canvas=document.querySelector（“canvas”）；
var ctx=canvas.getContext（“2d”）；
document.querySelector（“按钮”）.addEventListener（“单击”，函数）（）{
html2canvas（document.querySelector（“#content”），{canvas:canvas}）{
log（“在现有画布上绘制”）；
});
}，假）；
这是由于安全限制。如果SVG包含任何外部引用（外来对象，如图像数据、css等），浏览器将不允许绘制SVG 出于安全目的，Gecko对SVG内容进行了一些限制 当它被用作图像时：
- 无法加载外部资源（例如图像、样式表），但如果通过BlobBuilder[Blob]对象URL或URL内联，则可以使用这些资源 数据：URI
- [……]