将包含混合内容的Div复制到剪贴板

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.

我正在尝试构建一个应用程序，其中需要将整个div作为映像复制到剪贴板。该div可以包含嵌套的div和图像、svgs等。

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.

目前，我可以将它转换为一个图像，并使用下面的代码在一个新的选项卡中打开它。但是，只有当div中有纯文本时，它才会工作。当我添加图像时，它会失败。我只需要复制一个黑屏。

<!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:

编辑:我得到了在本地服务器上托管img标记的代码，并使其与svg元素一起工作。但是我的应用程序有如下的混合标签:

<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.

有什么办法可以让它运行起来，这样我就可以得到截图了。我还希望它能与IE、Chrome和火狐兼容。我尝试使用dom到图像库，但它不支持IE。

Thanks in advance

谢谢提前

1 个解决方案

#1

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.

如果你是html结构，你可以粘贴它的完整结构。

#1