Copy Div with mixed content as image to clipboard

I am trying to build an application in which I need to copy an entire div as an image to the clipboard. The div can contain nested divs and images, svgs etc.

I have searched for this a lot but am unable to find any answer to my requirement.

Currently, I can convert it to an image and open it in a new tab with the below code. However, it only works if there is plain text in the div. When I add an image, it fails. I just get a black screen copied.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
</head>
<body>
    <script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script>
    <script type="text/javascript">
    function copy() {
        var c = document.getElementsByClassName('myclass')[0];
        html2canvas(c, {
            onrendered: function(canvas) {
                theCanvas = canvas;
                var image = new Image();
                image.id = "pic"
                image.src = theCanvas.toDataURL();
                image.height = c.clientHeight
                image.width = c.clientWidth
                window.open(image.src, 'Chart')
            }
        })
    }
    </script>
    <button onclick='copy()'>Copy</button>
    <div class="myclass">
        Hi There!!!!!!!!
    </div>
</body>
</html>

This helps me open the image in a new window. Any way to directly copy it to the clipboard rather than the right click context menu from the new window and make it all work with mixed content. Any help would be appreciated.

EDIT: I got the code to work with img tag on hosting it on a local server and also made it work with svg elements. But my app has mixed tags like the following:

<div>
    <div>
        some text here
        <svg>
            <g>...</g>
            <g>...</g>
        </svg>
        <svg>
            <g>...</g>
            <g>...</g>
        </svg>
        <div>
            some text here
        </div>
    </div>
</div>

Any ideas to make it work with all this so that I get the screenshot as it is. I also want it to work with IE, Chrome and Firefox. I tried using dom-to-image library but it does not support IE.

Thanks in advance

function copy() { var c = document.getElementsByClassName('myclass')[0]; html2canvas(c, { onrendered: function(canvas) { document.getElementById("result").setAttribute("src", canvas.toDataURL()) } }) }

<html lang="en"> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js"></script> </head> <body> <button onclick='copy()'>Copy</button> See image at bottom of page after clicking... <div class="myclass"> <div class="personal_info_form_group"> <label>First Name*</label> <input type="text" class="form-control" name="first_name" id="first_name" value="" placeholder="first name" /> </div> <div class="personal_info_form_group"> <label>Last Name*</label> <input type="text" class="form-control" name="last_name" id="last_name" value="" placeholder="first name" /> </div> Hi There!!!!!!!! <div> <div> some text here <svg> <g>asndalsnd</g> <g>sadmlkasd</g> </svg> <svg> <g>sadnkasndkj</g> <g>asdnasndjsd</g> </svg> <div> some text here </div> </div> </div> </div> <img style="border:solid 1px red;" id="result" /> </body> </html>

Recommended topics

Hot tags