复制包含混合内容的 Div 为图片到剪贴板

Question

复制包含混合内容的 Div 为图片到剪贴板

javascriptjqueryhtmlhtml2canvaswebpage-screenshot

14

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

我已经搜索了很多，但无法找到符合我的要求的答案。

目前，我可以使用以下代码将其转换为图像并在新标签页中打开。然而，只有当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>

这有助于我在新窗口中打开图像。有没有直接将其复制到剪贴板而不是从新窗口的右键上下文菜单中复制，并使其与混合内容一起工作的方法。任何帮助都将不胜感激。

编辑：我已经让代码可以在本地服务器上托管的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>

任何想法可以让它在所有这些情况下正常工作，以便我可以得到原样的屏幕截图。我还希望它能与IE、Chrome和Firefox一起使用。我尝试使用dom-to-image库，但它不支持IE。

提前致谢

- Varun Sharma

将包含混合内容的Div复制为图像到剪贴板。在问题的javascript中，html被复制到剪贴板的哪里？另请参见“是否有一种方法只使用javascript命令选择和复制图像到剪贴板？”、“带有HTML标记的Javascript Blob文档可以保存格式” - guest271314

你能在问题中包含要转换为图像的 <div> 的完整 html 吗？ - guest271314

这太长而且太复杂了。我在想，出于安全原因是否可能将其复制到剪贴板上，如果可以，是否可以连同其关联的样式表一起复制。 - Varun Sharma

你尝试过链接的问题/答案中提到的方法吗？另请参阅在窗口之间拖放图像而不是链接-HTML5。 - guest271314

我尝试了html2canvas和xml序列化，但它们不包括样式。还尝试了dom-to-image，但它不支持IE。 - Varun Sharma

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Asim Zaka · Accepted Answer

我已按照以下方式测试了您的代码，它正常工作。

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

如果您的HTML结构不同，请粘贴其完整结构。