我正在使用html2canvas将div包含svg对象,图像和html内容转换为图像,但它没有从外部css文件中获取css样式。
我把那些css类目标放在外部css文件中。
有人请帮我这个.. 我附上了两张照片 what i am seeing in browser和 the exported image 提前致谢。 这是我的代码示例:
window.exportAsImage = function () {
var target = document.getElementById("target");
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:#FFDDCC;
color:#000000;
font-weight:bold;
}
.circle {
stroke:green;
stroke-width:4;
fill:yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<div id="target" class="target" height="300px" width="400px">
<span>My Chart</span>
<div id="image" class="image" height="200px" width="150px">
<img src="f.png"/>
</div>
<div>
<div>
<span>
<svg width="100" height="100" id="svgElm">
<circle cx="50" cy="50" r="40" class="circle" />
</svg>
</span>
</div>
</div>
</div>
<input type="button" value="export" name = "export" onclick="exportAsImage()"/>
&#13;