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

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

РЕДАКТИРОВАТЬ: я получил код для работы с тегом 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.

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


javascript html jquery html2canvas webpage-screenshot
person Varun Sharma    schedule 03.01.2017    source источник
comment
Копировать Div со смешанным содержимым в виде изображения в буфер обмена Где html копируется в буфер обмена в javascript в вопросе? См. также Есть ли способ выбрать и скопировать изображение в буфер обмена только с помощью команд javascript?, Документ Javascript Blob с html-тегами для сохранения с форматированием   -  person guest271314    schedule 10.01.2017
comment
Я застрял в преобразовании div в изображение. Копирование не проблема   -  person Varun Sharma    schedule 11.01.2017
comment
Можете ли вы включить полные html из <div>, которые вы пытаетесь преобразовать в изображение, в Вопрос?   -  person guest271314    schedule 11.01.2017
comment
Это слишком долго и сложно. Я думаю, возможно ли вообще скопировать в буфер обмена по соображениям безопасности, и если да, могу ли я скопировать его с соответствующей таблицей стилей   -  person Varun Sharma    schedule 11.01.2017
comment
Пробовали ли вы подходы в связанных вопросах/ответах? См. также Перетаскивание изображений, а не ссылок между окна - HTML5   -  person guest271314    schedule 11.01.2017
comment
Я пробовал сериализацию html2canvas и xml, но она не включает стили. Также пробовал dom-to-image, но он не поддерживает IE.   -  person Varun Sharma    schedule 11.01.2017
comment
Вам нужно получить стили отдельно, если они не установлены в атрибуте style элемента. См. раздел Сохранение элемента pre в формате PDF с помощью CSS.   -  person guest271314    schedule 11.01.2017
comment
Любые идеи о том, как получить стили и установить их перед преобразованием   -  person Varun Sharma    schedule 11.01.2017
comment
Используйте комбинации подходов в связанных вопросах и ответах.   -  person guest271314    schedule 11.01.2017

Ответы (1)


arrow_upward
6
arrow_downward

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

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

person Asim Zaka    schedule 09.01.2017
comment
Структура HTML немного сложна и включает в себя элементы пути и текста. Хотя я могу скопировать обычный HTML-документ, я не могу сделать это с HTML-кодом, который связан с ним CSS. Есть идеи по этому поводу?? - person Varun Sharma; 09.01.2017
comment
Это может работать только со встроенным стилем. jsfiddle.net/arzyu/L9hqxww4/1 Проверьте это. Это может помочь вам. stackoverflow.com/questions/40190028/ - person Asim Zaka; 10.01.2017
comment
Вы пробовали эти? 1 ) github.com/tsayen/dom-to-image 2 ) github.com/cburgmer/rasterizeHTML.js - person Asim Zaka; 10.01.2017
comment
Любые идеи о том, как заставить его работать с внешней таблицей стилей? - person Varun Sharma; 10.01.2017
comment
Я пробовал как Dom-to-image, так и rasterizeHTML, но они не работают в Internet Explorer, и мне требуется кросс-браузерная поддержка. - person Varun Sharma; 10.01.2017