JSFiddle - React, Tailwind, and code Playground

by Yasuhiro KAMO

HTML

<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.js"></script>
<script src="https://rawgit.com/niklasvh/html2canvas/master/dist/html2canvas.svg.js"></script>
<button id="capture">capture</button>
<div id='targetContainer'>
    <img src='https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w100'></img>

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
       <circle cx="100" cy="100" r="100" fill="red" />
      <rect x="130" y="130" width="300" height="200" fill="blue" />
    </svg>

    <svg id="svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100" height="100">
      <image overflow="visible" width="100" height="100" xlink:href="https://lh3.ggpht.com/O0aW5qsyCkR2i7Bu-jUU1b5BWA_NygJ6ui4MgaAvL7gfqvVWqkOBscDaq4pn-vkwByUx=w100" ></image>
    </svg>
</div>

<div id='captureContainer'></div>

CSS

img {
    border: solid 1px red; 
}

svg {
    border: solid 1px blue; 
}

JavaScript

$(function(){
    $('#capture').on('click', function(){
        var $target = $("#svg");
        html2canvas($target, {
            logging: true,
            profile: true,
            useCORS: true,
            allowTaint: true
        }).then(function(canvas) {
            $('#captureContainer').append(canvas);
        });
    });
});