14

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

Varun Sharma
  • 1,602
  • 1
  • 13
  • 37
  • _"Copy Div with mixed content as image to clipboard"_ Where is `html` copied to clipboard at `javascript` at Question? See also [Is there a way to select and copy an image to clipboard only with javascript commands?](http://stackoverflow.com/questions/41025469/is-there-a-way-to-select-and-copy-an-image-to-clipboard-only-with-javascript-com), [Javascript Blob document with html tags to be saved with formatting](http://stackoverflow.com/questions/34389649/javascript-blob-document-with-html-tags-to-be-saved-with-formatting/) – guest271314 Jan 10 '17 at 17:55
  • I'm stuck at converting the div to image. Copying is not an issue – Varun Sharma Jan 11 '17 at 02:15
  • Can you include full `html` of `
    ` that you are trying to convert to an image at Question?
     – guest271314 Jan 11 '17 at 02:20
  • It's too long and complicated. I am thinking is it even possible to copy to clipboard for security reasons and if yes, can I copy it with its associated stylesheet – Varun Sharma Jan 11 '17 at 02:31
  • Have you tried approaches at linked Questions/Answers? See also [Drag and drop images, and not links, between windows - HTML5](http://stackoverflow.com/questions/41388434/drag-and-drop-images-and-not-links-between-windows-html5) – guest271314 Jan 11 '17 at 02:37
  • I've tried html2canvas and xml serialisation but it doesn't include the styles. Also tried dom-to-image but it doesn't support IE – Varun Sharma Jan 11 '17 at 02:40
  • You need to get the styles separately, if not set at `style` attribute of element. See [Save a pre element as PDF with CSS](http://stackoverflow.com/questions/30135765/save-a-pre-element-as-pdf-with-css) – guest271314 Jan 11 '17 at 02:42
  • Any ideas on how to get the styles and set them before conversion – Varun Sharma Jan 11 '17 at 02:43
  • Use combinations of approaches at linked Questions and Answers. – guest271314 Jan 11 '17 at 02:45

1 Answers1

6

I have tested your code as following and it is working fine.

<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>    
    <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">
        <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>
</body>

If you are html structure is something else can you paste its complete structure.

Asim Zaka
  • 546
  • 3
  • 17
  • The HTML structure is a bit complicated and includes path and text elements too. Although I can copy a plain HTML document, I am unable to do it with an HTML which has associated CSS with it. Any ideas regarding that?? – Varun Sharma Jan 09 '17 at 17:37
  • It might only works with inline style. http://jsfiddle.net/arzyu/L9hqxww4/1/ Check this one. It might help you. http://stackoverflow.com/questions/40190028/html2canvas-does-not-take-css-style-from-external-css-file – Asim Zaka Jan 09 '17 at 21:13
  • Have you tried these. 1 ) https://github.com/tsayen/dom-to-image 2 ) https://github.com/cburgmer/rasterizeHTML.js – Asim Zaka Jan 09 '17 at 21:22
  • Any ideas on how to make it work with external style sheet? – Varun Sharma Jan 10 '17 at 02:49
  • I have tried both Dom-to-image and rasterizeHTML but they do not work in internet explorer and I require cross browser support – Varun Sharma Jan 10 '17 at 02:51