html2canvas does not take css style from external css file

问题

I am converting div contains svg objects, images and html contents to image using html2canvas, But it does not taking the css style from external css file.

i have put those css classes target and circle in external css file.

Somebody please help me on this.. i have attached both images what i am seeing in browser and the exported image Thanks in advance. here is my code sample:

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()"/>

来源：https://stackoverflow.com/questions/40190028/html2canvas-does-not-take-css-style-from-external-css-file

标签

javascript

html

css

html2canvas