我想将div转换为图像并下载。我有一个脚本将div转换为图像并将svg独立转换为图像。
如果我将父div转换为图像，它也不会转换子svg。
但是，我有包含图像，html内容和svg的div，我想将所有图像一起转换为图像，因为我在屏幕上使用javascript看到div。
图表在浏览器中显示为： chart as it is in browser
导出的图片看起来 exported image
在此导出的图像中，未显示svg形状。
任何帮助将不胜感激。感谢。
我的示例代码：
window.exportAsImage = function() {
var target = document.getElementById("chart-container-plan_vs_achieved");
html2canvas(target, {
onrendered: function (canvas) {
var imgageData = canvas.toDataURL("image/png");
var newData = imgageData.replace(/^data:image\/png/, "data:application/octet-stream");
var link = document.createElement("a");
link.style.display = "none";
link.setAttribute("download", "myImage.png");
link.setAttribute("href", newData);
document.body.appendChild(link);
link.click();
link.remove();
}
});
}.target{
height:300px;
width:300px;
background-color:#DDCCAA;
color:#000000;
font-weight:bold;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="chart-container-plan_vs_achieved" class=" x-component" style="width: 382px; height: 208px;"><div style="width: 382px; height: 166.4px; float: left; text-align: center;" widthpercent="100.0" heightpercent="80" id="chart-holder-plan_vs_achieved-0"><span id="chartobject-19" style="position: relative; text-align: left; line-height: normal; display: inline-block; font-weight: normal; font-variant: normal; font-style: normal; text-decoration: none; padding: 0px; margin: 0px; border: medium none; direction: ltr; width: 100%; height: 100%;" class="fusioncharts-container"><svg height="166" version="1.1" width="382" xmlns="http://www.w3.org/2000/svg" style="overflow: hidden; -moz-user-select: none; cursor: default; position: relative; background-color: rgb(255, 255, 255);" id="raphael-paper-755"><desc>Column Chart</desc><defs><clipPath id="9B15D3FA-95F4-4822-856F-0481ACEE3FA1"><rect x="34" y="17" width="331" height="118" transform="matrix(1,0,0,1,0,0)"/></clipPath></defs><g class="raphael-group-756-background"><rect style="stroke: none; fill-opacity: 0.5; fill: rgb(255, 255, 255);" x="0" y="0" width="382" height="166" stroke="none" fill-opacity="0.5" fill="#ffffff" rx="0" ry="0"/><rect style="stroke: rgb(118, 117, 117); stroke-opacity: 0.5; fill: none;" x="0" y="0" width="382" height="166" stroke="#767575" stroke-opacity="0.5" stroke-width="0" stroke-dasharray="none" fill="none" rx="0" ry="0"/></g><g class="raphael-group-763-canvas"><rect style="stroke: rgb(84, 84, 84); stroke-opacity: 1; stroke-linejoin: miter; fill: none;" x="33" y="16" width="333" height="120" rx="0" ry="0" stroke-width="2" stroke="#545454" stroke-opacity="1" stroke-linejoin="miter" fill="none"/><rect style="stroke: none; fill-opacity: 1; fill: rgb(255, 255, 255);" x="34" y="17" width="331" height="118" rx="0" ry="0" stroke-width="0" stroke="none" fill-opacity="1" fill="#ffffff"/></g><g class="raphael-group-766-axisbottom"><g class="raphael-group-769-x-axis-bands"/><g class="raphael-group-775-y-axis-bands"><rect style="fill-opacity: 0.5; fill: rgb(238, 238, 238); stroke: rgb(0, 0, 0);" x="34" y="87.80000000000001" width="331" height="23.599999999999994" fill-opacity="0.5" fill="#eeeeee" stroke-width="0" rx="0" ry="0" stroke="#000000"/><rect style="fill-opacity: 0.5; fill: rgb(238, 238, 238); stroke: rgb(0, 0, 0);" x="34" y="40.60000000000001" width="331" height="23.599999999999994" fill-opacity="0.5" fill="#eeeeee" stroke-width="0" rx="0" ry="0" stroke="#000000"/></g><g class="raphael-group-781-y-axis-bands"/><g class="raphael-group-771-x-axis-lines"/><g class="raphael-group-777-y-axis-lines"><path style="stroke: rgb(113, 113, 112); stroke-opacity: 0.4; fill: none; shape-rendering: crispedges;" d="M34,111.5L365,111.5" stroke="#717170" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="none" fill="none" shape-rendering="crispEdges"/><path style="stroke: rgb(113, 113, 112); stroke-opacity: 0.4; fill: none; shape-rendering: crispedges;" d="M34,88.5L365,88.5" stroke="#717170" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="none" fill="none" shape-rendering="crispEdges"/><path style="stroke: rgb(113, 113, 112); stroke-opacity: 0.4; fill: none; shape-rendering: crispedges;" d="M34,64.5L365,64.5" stroke="#717170" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="none" fill="none" shape-rendering="crispEdges"/><path style="stroke: rgb(113, 113, 112); stroke-opacity: 0.4; fill: none; shape-rendering: crispedges;" d="M34,41.5L365,41.5" stroke="#717170" stroke-opacity="0.4" stroke-width="1" stroke-dasharray="none" fill="none" shape-rendering="crispEdges"/></g><g class="raphael-group-783-y-axis-lines"/><g class="fusioncharts-xaxis-0-gridlabels" style=""><text style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: middle; stroke: none; font-family: Verdana,sans; font-size: 10px; font-weight: normal; font-style: normal;" class="fusioncharts-label" fill-opacity="1" fill="#555555" x="116.75" y="151" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" font-family="Verdana,sans" font-size="10px" font-weight="normal" font-style="normal"><tspan dy="-2.5" x="116.75">Planned</tspan></text><text style="fill-opacity: 1; fill: rgb(85, 85, 85); text-anchor: middle; stroke: none; font-family: Verdana,sans; font-size: 10px; font-weight: normal; font-style: normal;" class="fusioncharts-label" fill-opacity="1" fill="#555555" x="282.25" y="151" text-anchor="middle" transform="matrix(1,0,0,1,0,0)" stroke="none" font-family="Verdana,sans" font-size="10px" font-weight="normal" font-style="normal"><tspan dy="-2.5" x="282.25">Achived</tspan></text></g><g class="fusioncharts-yaxis-0-gridlabels" style=""><text style="fill: rgb(85, 85, 85); text-anchor: end; stroke: none; font-family: Verdana,sans; font-size: 10px;" class="fusioncharts-label" fill="#555555" x="28" y="135" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" font-family="Verdana,sans" font-size="10px" font-weight="undefined" font-style="undefined"><tspan dy="3.5" x="28">0</tspan></text><text style="fill: rgb(85, 85, 85); text-anchor: end; stroke: none; font-family: Verdana,sans; font-size: 10px;" class="fusioncharts-label" fill="#555555" x="28" y="111.4" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" font-family="Verdana,sans" font-size="10px" font-weight="undefined" font-style="undefined"><tspan dy="3.4999984741210994" x="28">1K</tspan></text><text style="fill: rgb(85, 85, 85); text-anchor: end; stroke: none; font-family: Verdana,sans; font-size: 10px;" class="fusioncharts-label" fill="#555555" x="28" y="87.80000000000001" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" font-family="Verdana,sans" font-size="10px" font-weight="undefined" font-style="undefined"><tspan dy="3.499996948242199" x="28">2K</tspan></text><text style="fill: rgb(85, 85, 85); text-anchor: end; stroke: none; font-family: Verdana,sans; font-size: 10px;" class="fusioncharts-label" fill="#555555" x="28" y="64.2" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" font-family="Verdana,sans" font-size="10px" font-weight="undefined" font-style="undefined"><tspan dy="3.5000030517578153" x="28">3K</tspan></text><text style="fill: rgb(85, 85, 85); text-anchor: end; stroke: none; font-family: Verdana,sans; font-size: 10px;" class="fusioncharts-label" fill="#555555" x="28" y="40.60000000000001" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" font-family="Verdana,sans" font-size="10px" font-weight="undefined" font-style="undefined"><tspan dy="3.5000015258789148" x="28">4K</tspan></text><text style="fill: rgb(85, 85, 85); text-anchor: end; stroke: none; font-family: Verdana,sans; font-size: 10px;" class="fusioncharts-label" fill="#555555" x="28" y="17" text-anchor="end" transform="matrix(1,0,0,1,0,0)" stroke="none" font-family="Verdana,sans" font-size="10px" font-weight="undefined" font-style="undefined"><tspan dy="3.5" x="28">5K</tspan></text></g><g class="fusioncharts-yaxis-1-gridlabels" style=""/><g class="raphael-group-786-axis-name"/></g><g class="raphael-group-757-dataset"><g class="raphael-group-801-columns" style="" clip-path="url('#9B15D3FA-95F4-4822-856F-0481ACEE3FA1')"><rect style="fill-opacity: 1; fill: rgb(0, 117, 194); stroke: rgb(51, 51, 51); stroke-opacity: 1; stroke-linejoin: miter;" x="91.5" y="34.5" width="50" height="101" rx="0" ry="0" fill-opacity="1" fill="#0075c2" stroke="#333333" stroke-opacity="1" stroke-width="1" stroke-dasharray="none" stroke-linejoin="miter"/><rect style="fill-opacity: 1; fill: rgb(26, 175, 93); stroke: rgb(51, 51, 51); stroke-opacity: 1; stroke-linejoin: miter;" x="257.5" y="104.5" width="50" height="31" rx="0" ry="0" fill-opacity="1" fill="#1aaf5d" stroke="#333333" stroke-opacity="1" stroke-width="1" stroke-dasharray="none" stroke-linejoin="miter"/></g></g><g class="raphael-group-767-axistop"><g class="raphael-group-768-x-axis-bands"/><g class="raphael-group-774-y-axis-bands"/><g class="raphael-group-780-y-axis-bands"/><g class="raphael-group-770-x-axis-lines"/><g class="raphael-group-776-y-axis-lines"/><g class="raphael-group-782-y-axis-lines"/><g class="fusioncharts-xaxis-0-gridlabels" style=""/><g class="fusioncharts-yaxis-0-gridlabels" style=""/><g class="fusioncharts-yaxis-1-gridlabels" style=""/></g><g class="fusioncharts-datalabels" style="" transform="matrix(1,0,0,1,0,0)"><text style="fill-opacity: 1; fill: rgb(85, 85, 85); font-size: 10px; stroke: none; text-anchor: middle;" class="fusioncharts-label" x="116.5" y="22.5" fill-opacity="1" fill="#555555" font-size="10px" stroke="none" text-anchor="middle"><tspan dy="3.5" x="116.5">4.2K</tspan></text><text style="fill-opacity: 1; fill: rgb(85, 85, 85); font-size: 10px; stroke: none; text-anchor: middle;" class="fusioncharts-label" x="282.5" y="92.5" fill-opacity="1" fill="#555555" font-size="10px" stroke="none" text-anchor="middle"><tspan dy="3.5" x="282.5">1.3K</tspan></text></g><g class="raphael-group-758-hot"/><g class="raphael-group-761-buttons"/></svg></span></div><div style="width: 382px; height: 41px; float: left; text-align: center;" widthpercent="100.0" heightpercent="20.0" id="chart-attachment-holder-plan_vs_achieved"><div style="display:table;text-align:center;width:100%;height:100%;"><div style="display:table-cell;vertical-align: middle; color:#F2C500; font-size:24px;">30.4%</div></div></div></div>
<input type="button" value="export" name = "export" onclick="exportAsImage()"/>