html2canvas不从外部css文件中获取css样式

时间:2016-10-22 08:36:02

标签: javascript html css html2canvas

我正在使用html2canvas将div包含svg对象,图像和html内容转换为图像,但它没有从外部css文件中获取css样式。

我把那些css类目标放在外部css文件中。

有人请帮我这个.. 我附上了两张照片 what i am seeing in browserthe 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;
&#13;
&#13;

0 个答案:

没有答案