Копировать 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