Html2canvas: Тег изображения не захватывает

Созданный на 17 дек. 2012  ·  43Комментарии  ·  Источник: niklasvh/html2canvas

Привет,

Я попытался преобразовать html в изображение с помощью html2canvas, он работает нормально. Но тег изображения внутри элементов html не преобразуется, приведенный ниже один пример:


yellow
green
green
green
yellow
red
red
yellow
green

Рабочий элемент HTML

ПнВтМыЧтПтСбВс
26
27
28 год
29
30
31 год
1
2 yellowgreengreengreenyellowredredyellowgreen колокол оснастки

Вот мой скрипт для конвертации html2canvas:

var html2obj = html2canvas ($ ('таблица'));
var queue = html2obj.parse ();
var canvas = html2obj.render (очередь);
var img = canvas.toDataURL ();
$ ('# calendar_to_canvas'). attr ('src', img);

Скриншот PFA
calendar

Спасибо,
Бала

Самый полезный комментарий

и это сработало !!, только я должен поставить "размер фона: 100% 100%;" вместо background-size: cover;

Все 43 Комментарий

Вам не хватает предварительной загрузки изображений, которая сама по себе является асинхронной, поэтому вам нужно обернуть ее в обратные вызовы. Вероятно, вы также используете более старую версию, поэтому я бы рекомендовал получить последнюю версию с https://github.com/niklasvh/html2canvas/downloads, а затем протестировать с помощью:

html2canvas( $('table'), {
   onrendered: function( canvas ) {
        var img = canvas.toDataURL();
        $('#calendar_to_canvas').attr('src', img);
   }
});

Спасибо за быстрый ответ, я загрузил последнюю версию и попробовал приведенный выше код, но тег изображения все еще не отображается на визуализированном холсте. Мне чего-то не хватает, я добавил html2canvas.js, jquery.plugin.html2canvas и использовал jquery 1.7. Ваша помощь очень ценится.

Размещены ли изображения в том же источнике, что и страница, которую вы визуализируете?

Установите logging: true и проверьте, что консоль говорит об изображениях, они не работают?

Изображения загружаются идеально, см. Журналы ниже:

html2canvas: Начало предварительной загрузки: поиск фоновых изображений html2canvas.js: 27
html2canvas: начало: изображения: 1/1 (сбой: 0) html2canvas.js: 27
html2canvas: start: images: 2/2 (сбой: 0) html2canvas.js: 27
html2canvas: начало: изображения: 3/3 (сбой: 0) html2canvas.js: 27
html2canvas: start: images: 4/4 (сбой: 0) html2canvas.js: 27
html2canvas: начало: изображения: 5/5 (сбой: 0) html2canvas.js: 27
html2canvas: начало: изображения: 6/6 (сбой: 0) html2canvas.js: 27
html2canvas: начало: изображения: 7/7 (сбой: 0) html2canvas.js: 27
html2canvas: Предварительная загрузка: Поиск изображений html2canvas.js: 27
html2canvas: Предварительная загрузка: Готово. html2canvas.js: 27
html2canvas: start: images: 8/18 (сбой: 0) html2canvas.js: 27
html2canvas: start: images: 9/18 (сбой: 0) html2canvas.js: 27
html2canvas: начало: изображения: 10/18 (сбой: 0) html2canvas.js: 27
html2canvas: start: images: 11/18 (сбой: 0) html2canvas.js: 27
html2canvas: start: images: 12/18 (сбой: 0) html2canvas.js: 27
html2canvas: начало: изображения: 13/18 (сбой: 0) html2canvas.js: 27
html2canvas: start: images: 14/18 (сбой: 0) html2canvas.js: 27
html2canvas: start: images: 15/18 (сбой: 0) html2canvas.js: 27
html2canvas: начало: изображения: 16/18 (сбой: 0) html2canvas.js: 27
html2canvas: начало: изображения: 17/18 (сбой: 0) html2canvas.js: 27
html2canvas: начало: изображения: 18/18 (сбой: 0) html2canvas.js: 27
Завершена загрузка изображений: # 18 (сбой: 0) html2canvas.js: 27

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

html2canvas: Renderer: Canvas renderer done - возвращение объекта canvas

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

Привет, niklasvh, он отлично справился с той же исходной проблемой политики, я решил работать на веб-сервере, ранее работавшем локально, с использованием file: //, это рассматривается как проблема междоменного доступа. Спасибо, что направили меня в правильном направлении. Это отличный плагин :)

Niklashvh Я пытаюсь сделать это для гибридного приложения для Android, которое запускается локально с помощью file: //, можете ли вы помочь мне решить эту проблему с перекрестным доменом или любые предложения, которые я очень ценю.

Если вам не нужно никуда экспортировать изображение, вы всегда можете установить allowTaint: true

Мы экспортируем изображение в память и отправляем его в формате pdf по электронной почте

У меня такая же проблема, лог такой:

html2canvas: Начало предварительной загрузки: поиск фоновых изображений html2canvas.js: 21
html2canvas: Предварительная загрузка: поиск изображений html2canvas.js: 21
html2canvas: Предварительная загрузка: Готово. html2canvas.js 21
html2canvas: начало: изображения: 1/2 (сбой: 0) html2canvas.js: 21
html2canvas: start: images: 2/2 (сбой: 0) html2canvas.js: 21
Завершена загрузка изображений: # 2 (сбой: 0) html2canvas.js: 21
html2canvas: Renderer: Canvas renderer done - возвращение obj canvas

изображения расположены в фоновом изображении, просто загрузите основной блок изображения, заключенные не отображаются.

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

Любая идея?

если я добавлю "размер фона: обложка;" к стилю изображение не появляется ...

видимо это проблема

и это сработало !!, только я должен поставить "размер фона: 100% 100%;" вместо background-size: cover;

HTML @ Canvas не захватывает при использовании онлайн-адреса с img, каково решение этой проблемы?
Благодарность

@ Elgamal10 использовать прокси

https://github.com/brcontainer/html2canvas-php-proxy (прокси html2canvas с php)
https://github.com/brcontainer/html2canvas-asp-vbscript-proxy (прокси html2canvas с asp-classic - vb)
https://github.com/brcontainer/html2canvas-csharp-proxy (прокси html2canvas с asp.net - csharp)

Примечание: прочитать файл README.md

Спасибо за ответ, снимок экрана сделан хорошо, но есть такие ошибки, как:

html2canvas_5 не определен
html2canvas_0 не определен
html2canvas_5 не определен
html2canvas_4 не определен
html2canvas_1 не определен
html2canvas_5 не определен

@ Elgamal10 создать проблему в проекте
https://github.com/brcontainer/html2canvas-csharp-proxy/issues?state=open

Я считаю, что вы используете C # (ASP.NET), я прав?

Привет Никлас,

Я начал использовать ваш api, и это здорово .. Но я застрял, не могли бы вы помочь ..

Я пытаюсь преобразовать HTML в холст, используя код:
jQuery ('html'). html2canvas ({
прокси: " http: //localhost/myproject/proxy.jsp ",
userCORS: правда ,
onrendered: function (canvas) {
оповещение (холст);
var url = canvas.toDataURL ("изображение / png");
window.open (url, '_blank');
},
});

Теперь у меня есть файл с именем proxy.jsp, который сохраняет все изображения перекрестного происхождения в пути ~ / tomcat / myproject / images / "

После этого я вижу это в консоли
Ресурс интерпретируется как сценарий, но передается с типом MIME image / jpeg: " http: //localhost/myproject/proxy.jsp? Url = http% 3A% 2F% 2Fi.ebayi … QYEAAMXQVERSuVtL% 2F% 24_1.JPG% 3Fset_id% 3D8800004005 & callback = html2canvas_64 ". html2canvas.js: 2264

После всего этого моя функция обратного вызова не выполняется, и я не могу создать холст ..

Что может быть сделано? Не могли бы вы помочь?

Огромное спасибо

@ himakshi89 нельзя использовать proxy: и userCORS: одновременно.

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

в вашем коде осталась запятая:

},//this is wrong.

});

Какая версия вашего html2canvas?

Попробуй это:

jQuery('body').html2canvas({
    "onrendered": function(canvas) {
    }
});

Если не работает, попробуйте загрузить html2canvas этот https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js и использовать этот код:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

@brcontainer
Привет

Я изменил свой код и теперь отправляю ответ от proxy.jsp как
({"html2canvas_67": http: //localhost/myproject/0.1651487380333363.jpg "})

Теперь в консоли ошибок не отображается.
Но сейчас ничего не происходит .. Что должно происходить или есть что-то, что нужно изменить?

Пожалуйста помоги

А так как консоль ничего показать не может
вы использовали мой второй пример кода? он отправляет журналы на консоль.

Попробуйте предоставить свой код для онлайн-тестирования.

Как было предложено, я удалил useCORS и заменил html на тело

jQuery ('body'). html2canvas ({
прокси: " http://nisquare.dyndns.org : 8087 / facebook / proxy.jsp",
ведение журнала: правда ,
onrendered: function (canvas) {
var url = canvas.toDataURL ("изображение / png");
window.open (url, '_blank');
}
});

Я также получаю, что это моя консоль
html2canvas: ошибка загрузки : http://cmsip.tradus.ibcdn.com/MOBMKXE29ULYUMKH_4902586_320x360.jpg html2canvas.js: 21

Я приложил скриншот того, что получаю
download

Вы пробовали скачать https://github.com/niklasvh/html2canvas/releases/download/0.4.1/html2canvas.js

и этот код:

html2canvas($("body").get(0), {
    "logging": true,
    "proxy": "http://localhost/myproject/proxy.jsp",
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

или не?

ПРИМЕЧАНИЕ: http://nisquare.dyndns.org:8087/facebook/proxy.jsp работает!

Я скачал последнюю версию

Я заменяю код следующим

html2canvas ($ ("body"). get (0), {
прокси: " http://nisquare.dyndns.org : 8087 / facebook / proxy.jsp",
ведение журнала: правда ,
onrendered: function (canvas) {
var url = canvas.toDataURL ("изображение / png");
window.open (url, '_blank');
}
});

пришлите мне тест ссылки

Я использую это расширение Chrome, и оно все еще находится в режиме разработки

«Расширение Chrome» с JSP?

jsp используется только для прокси-части .. По вашему мнению, что предпочтительнее?

Chrome-расширение работает в другом «протоколе» и «фрейме», proxy.jsp использует протокол HTTP.

Я считаю, что хром-расширения не требуют прокси. Используйте как:

html2canvas($("body").get(0), {
    "logging": true,
    "onrendered": function(canvas) {
        alert(canvas);
        var url = canvas.toDataURL("image/png");
        window.open(url, "_blank");
    }
});

ЧИТАЙТЕ: http://developer.chrome.com/extensions/tut_debugging.html

@brcontainer
Привет, спасибо за идею ... Теперь мы используем API, предоставляемый самим Chrome. В нем есть функция chrome capturevisibletab, которая решает проблему очень легко :)

@ jgab-net большое вам спасибо. Слишком долго искали ошибку

@ Sumit8 (Y) пожалуйста

@gitbala Ваша проблема решена? @niklasvh Можно ли

@usmonster , продолжайте, экономит время, чтобы просмотреть все открытые вопросы :)

Да, это решено :)

В понедельник, 1 сентября 2014 г., в 4:11, usmonster [email protected] написал:

@gitbala https://github.com/gitbala Решена ли ваша проблема? @niklasvh
https://github.com/niklasvh Можно ли закрыть эту проблему? (Я остановлюсь на
сортировка ошибок - это раздражает .. :)

-
Ответьте на это письмо напрямую или просмотрите его на GitHub
https://github.com/niklasvh/html2canvas/issues/145#issuecomment -54047596
.

Я использую html2canvas - локальное изображение не отображается в PDF. какое решение для этого?

@niklasvh, пожалуйста, помогите - изображение логотипа в html не отображается в pdf

Мне не удалось преобразовать встроенное изображение. Как использовать «прокси»: « http: //localhost/myproject/proxy.jsp », я использую vue, где разместить этот jsp, и я не знаю, как использовать @niklasvh, вы можете помощь?

У @qiuyaofan такая же проблема, вы получили решение? Я использую его с angular2 и получаю изображения с другого сервера. @gitbala вы получили решение?

+1 Кстати, журналы выглядят хорошо ( html2canvas: Images loaded, starting parsing ), но я все еще не вижу изображений в PDF.

Я использую

allowTaint: правда,
useCORS: правда,
taintTest: ложь,

@NikhilRadadiya @qiuyaofan, ребята, тоже искали решение на стороне клиента. Использование vue js и получение изображения из файла giphy. Вот тот, который у меня хорошо сработал:

html2canvas(element, {
        "logging": true, //Enable log (use Web Console for get Errors and Warings)
        useCORS: true,
        taintTest: false,
        onrendered: function(canvas) {
          var img = new Image();
          img.onload = function() {
            document.body.appendChild(img);
          };
          img.error = function() {
            if(window.console.log) {
              window.console.log("Not loaded image from canvas.toDataURL");
            } else {
              alert("Not loaded image from canvas.toDataURL");
            }
          };
          img.src = canvas.toDataURL("image/png");
        }
      });

Таким образом, прокси-сервер не использовался.

@creepteed У меня есть другие элементы, которые мне нужно преобразовать в холст, а затем сохранить в pdf, мой html не содержит только изображения, если это так, то как я могу использовать указанную выше функцию, которую вы опубликовали?

Привет @niklasvh ,
Я хочу захватить веб-страницу с помощью htmltocanvas, все работает нормально, но когда я пытаюсь захватить веб-страницу, я не получаю изображения.
Вы можете мне помочь?
Вот мой код:
function capture(div_id=null) { jQuery(".screenshot_row_target").html2canvas({ logging: true, //taintTest : true, //proxy: "https://skeleton-21.myshopify.com", onrendered: function (canvas) { jQuery('#screenshot_img_val').val(canvas.toDataURL("image/png")); //document.getElementById("screenshot_html_form").submit(); } }); }

В консоли я получаю это
html2canvas: Preload starts: finding background-images html2canvas.js:19 html2canvas: Preload: Finding images html2canvas.js:19 html2canvas: Preload: Done. html2canvas.js:19 html2canvas: start: images: 0 / 0 (failed: 0) html2canvas.js:19 Finished loading images: # 0 (failed: 0) html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/files/1/2186/4293/files/user2_300x300.png?v=1503661428 html2canvas.js:19 html2canvas: Error loading background: html2canvas.js:19 html2canvas: Error loading <img>://cdn.shopify.com/s/assets/no-image-2048-5e88c1b20e087fb7bbe9a3771824e743c244f437e4f8ba93bbf7b11b53f7824c_300x300.gif html2canvas.js:19 html2canvas: Renderer: Canvas renderer done - returning canvas obj
Спасибо.

Была ли эта страница полезной?
0 / 5 - 0 рейтинги