Копировать Div со смешанным контентом как изображение в буфер обмена

Я пытаюсь создать приложение, в котором мне нужно скопировать весь div как изображение в буфер обмена. Div может содержать вложенные div и изображения, svgs и т.д.

Я много искал, но не смог найти ответа на мои требования.

В настоящее время я могу преобразовать его в изображение и открыть его на новой вкладке с помощью кода ниже. Однако он работает только в том случае, если в 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>

Это помогает мне открыть изображение в новом окне. Любой способ напрямую скопировать его в буфер обмена, а не контекстное меню правой кнопки мыши из нового окна и заставить все работать со смешанным контентом. Любая помощь будет оценена.

EDIT: я получил код для работы с тегом 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.

Заранее спасибо

Ответы

Ответ 1

Я проверил ваш код как следующий, и он работает нормально.

<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-структура - это что-то еще, вы можете вставить ее полную структуру.