2

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()"/>
Regin
  • 91
  • 1
  • 7
  • Are you testing locally or on a server? And what is the path to your CSS file? – sideroxylon Oct 22 '16 at 08:48
  • You can simply locate those rules and append them to your document before exporting it? This can be done automatically with code - this answer may be helpful if you decide to go that route: http://stackoverflow.com/questions/39806536/how-to-dynamically-change-a-class-css-styling/39807326#39807326 – enhzflep Oct 22 '16 at 11:36
  • Thanks guys, At sideroxylon, I have tested locally with the same code. while browser loads, it taking care of css file. But, i am facing the issue while exporting. At enhzflep, you are taking about tag right? I have attached that also. while browser renders the page, it's taking care of css means, then the problem should be in exporting part right? – Regin Oct 24 '16 at 15:51
  • 1
    For your reference - I have edited the question with those image. please take a look. – Regin Oct 24 '16 at 16:05

0 Answers0