Как сгенерировать «скриншот» html div с внешними изображениями?

У меня есть HTML-div с внешними изображениями. (Ниже приведен пример, но в фактическом случае я использую Amazon S3, поэтому загрузка и сохранение изображения на одном сервере не является вариантом). В настоящее время я использую html2canvas для преобразования div в изображение. Однако внешнее изображение всегда заменяется пустым пространством.

Код, который я использую для захвата изображения:

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
});

Отредактировано: jsfiddle: https://jsfiddle.net/0y2zxxL8/3/

Я могу использовать другую библиотеку. Я также могу сделать это в бэкэнд. (Я использую PHP + laravel 5 для бэкэнд). Есть ли способ генерировать «скриншот» HTML-div с внешними изображениями?

Обновление Текущий ответ работает после редактирования. Тем не менее, для моего фактического использования будет много изображений с их позицией, заданной пользователем путем перетаскивания. Я все еще могу получить позицию, но мне было бы лучше, если бы можно было не задавать позицию конкретно.

javascript,php,html,laravel,html2canvas,

15

Ответов: 2

8 принят
+50

Ваш JSFiddle задан, ReferenceError: Canvas2Image is not definedнажав кнопку «Сохранить PNG». Поэтому проверьте код (не скрипку) на ту же ошибку.

ОБНОВЛЕНИЕ
См. Этот пример JSFiddle в качестве ссылки. Пусть это поможет вам.

ОБНОВЛЕНИЕ 2
Я помещаю код в свой, проверьте его. Надеюсь, это будет ваше решение ..!

Рабочий результат с FF v44 и его работой. Взято с помощью кода JSFiddleвведите описание изображения здесь

$(function() { 
    $("#btnSave").click(function() { 
        html2canvas($("#widget"), {
            onrendered: function(canvas) {
                var context=canvas.getContext("2d"); // returns the 2d context object
                var img=new Image() //creates a variable for a new image

                img.src= "http://lorempixel.com/400/200/"; // specifies the location of the image
                context.drawImage(img,0,50); // draws the image at the specified x and y location
                // Convert and download as image 
                theCanvas = canvas;
                document.body.appendChild(canvas);

                // Convert and download as image 
                Canvas2Image.saveAsPNG(canvas); 
                $("#img-out").append(canvas);
            }
        });
    });
});

ОБНОВЛЕНИЕ 3 ( 12/29/2016 ) JSFiddle

После исследования выяснилось, что проблема заключается в том, что мы назначаем только источник изображения, который только передает сообщение браузеру для извлечения данных.

Дополнительный элемент изображения может быть недоступен в браузере, когда вы нажимаете для рисования холста. Мы просто передаем код, чтобы загрузить его, и все сделано.

Измените код, чтобы решить проблему с хромированием OP, как показано ниже:

img.onload = function() {
  context.drawImage(img, 0, 50);// draws the image at the specified x and y location
}

ОБНОВЛЕНИЕ 4 JSFiddle
Сделать динамическое положение изображения в соответствии с требованиями OP.

1

Вы можете попробовать сканировать источник изображения для внешних URL-адресов и изменить их на свой сайт и загрузить их с помощью php.

Что-то вроде

$(function() { 

  var imageproxy = "http://example.com/imageproxy.php"; //Change this
  var mydomain = new RegExp(location.host);

  $("#btnSave").click(function() { 

    $("#widget").find('img').each(function(){

       var img_src = $(this).attr('src');
       if(!mydomain.test(img_src)){
           $(this).attr('src', imageproxy + "?url=" + encodeURIComponent(img_src));
       }
    });

    html2canvas($("#widget"), {
        onrendered: function(canvas) {

            var link = $('<a target="_blank">Download</a>');
            link.attr('download', 'test.png');
            link.attr('href', canvas.toDataURL());

            $("#btnSave").after(link);
        }
    });
  });
});

imageproxy.php

<?php

if(!empty($_GET['url'])){

    $url = urldecode($_GET['url']);
    $img_type = "image/jpeg";

    $chunks = explode('.', $url);

    if(is_array($chunks) && count($chunks) > 1){
        $ext = end($chunks);

        switch ($ext){

            case 'jpg':
            case 'jpeg':
                $img_type = "image/jpeg";
            break;

            case 'png':
                $img_type = "image/png";
            break;

            case 'gif':
                $img_type = "image/gif";
            break;
        }
    }


    $img = file_get_contents($url);

    header ("Content-Type: $img_type");
    echo $img;
}

примечание: php-скрипт очень прост, обнаружение изображения не работает на 100%, это просто дает вам идею. Если вы используете некоторые библиотеки изображений php для загрузки и получения типа изображения, вы можете сделать это только с несколькими строками кода. вы также можете попробовать «php readfile».

JavaScript, PHP, HTML, Laravel, html2canvas,
Похожие вопросы
Яндекс.Метрика