Как сгенерировать «скриншот» 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 с внешними изображениями?

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

Ваш 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.

Вы можете попробовать сканировать источник изображения для внешних 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); } }); }); }); того, как $(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».