我正在使用 html2canvas 将包含 svg 对象、图像和 html 内容的 div 转换为图像，但它不会从外部 css 文件获取 css 样式。
我已将这些 css 类 target 和 Circle 放入外部 css 文件中。
有人请帮我解决这个问题..
我已附上两张图片我在浏览器中看到的内容 https://i.stack.imgur.com/QAEfO.jpg and
导出的图像 https://i.stack.imgur.com/CeyZO.png提前致谢。
这是我的代码示例：
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()"/>
None
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
