Как сгенерировать "скриншот" html-div с внешними изображениями?
У меня есть HTML-разделитель с внешними изображениями. (Ниже приведен пример, но в данном случае я использую 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 с внешними изображениями?
Обновить Текущий ответ работает после редактирования. Тем не менее, для моего фактического использования будет несколько изображений с их положением, заданным пользователем путем перетаскивания. Я все еще могу получить должность, но для меня было бы лучше, если бы можно было не устанавливать конкретную должность.
2 answers
Ваш 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) Jсфиддл
После исследования выяснилось, что проблема заключается в том, что мы назначаем только источник изображения, который только передает сообщение браузеру для извлечения данных.
Дополнительный элемент изображения может быть недоступен в браузере, когда вы нажимаете на него, чтобы нарисовать холст. Мы просто говорим коду загрузить его, и все готово.
Измените код, чтобы решить проблему Chrome, с которой сталкивается OP, например ниже:
img.onload = function() {
context.drawImage(img, 0, 50);// draws the image at the specified x and y location
}
ОБНОВЛЕНИЕ 4 Jсфиддл
Сделайте положение изображения динамическим в зависимости от требований 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);
}
});
});
});
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".