Привет,
Я попытался преобразовать html в изображение с помощью html2canvas, он работает нормально. Но тег изображения внутри элементов html не преобразуется, приведенный ниже один пример:
Пн | Вт | Мы | Чт | Пт | Сб | Вс |
---|---|---|---|---|---|---|
26 | 27 | 28 год | 29 | 30 | 31 год | 1 |
2 колокол оснастки |
Вот мой скрипт для конвертации html2canvas:
var html2obj = html2canvas ($ ('таблица'));
var queue = html2obj.parse ();
var canvas = html2obj.render (очередь);
var img = canvas.toDataURL ();
$ ('# calendar_to_canvas'). attr ('src', img);
Скриншот PFA
Спасибо,
Бала
Вам не хватает предварительной загрузки изображений, которая сама по себе является асинхронной, поэтому вам нужно обернуть ее в обратные вызовы. Вероятно, вы также используете более старую версию, поэтому я бы рекомендовал получить последнюю версию с 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
Я приложил скриншот того, что получаю
Вы пробовали скачать 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
Спасибо.
Самый полезный комментарий
и это сработало !!, только я должен поставить "размер фона: 100% 100%;" вместо background-size: cover;