Html2canvas: Проблемы с фоновыми изображениями

Кажется, исправлено в 0.4.1 (в ветке разработки). Вероятно, относится к # 256

Не могли бы вы попробовать с 0.4.1 и посмотреть,

Привет. У меня точно такая же проблема. Да, проблема все еще существует в 0.4.1. Спасибо за помощь.

У меня такая же проблема ... Есть ли решение? Спасибо Никласу за этот замечательный сценарий.

Этот код не будет отображаться.
div class = "mc-image" title = "" style = "background- image: url ('http://eterni-t.design.s3.amazonaws.com/381/theme-154-original-1.jpg' ); ширина: 1025 пикселей; высота: 780 пикселей; z-индекс: 9999 "

Я заметил, что если удалить background-size: cover; из моего class = "mc-image" он работает.

@ ymorin007 Вы используете Mac и Chrome / Opera / Safari и / или используете последнюю версию коммита (т. е. сами создали скрипт)?

Windows7 Chrome версии 30.0.1599.101 м

Временное исправление:

измените строку 2818 на

ctx.fillStyle = (options.background !== undefined) ? options.background : parsedData.backgroundColor;

Это определенно связано с двумя вариантами размера фона: содержать или покрывать.

Последняя фиксация (html2canvas 0.4.1) исправила это для меня

Моя все еще делает это даже после последнего коммита ...

Мой размер фона установлен на «крышка», и я также пробовал «авто 100%», и все равно он просто белый / прозрачный.

Если я удалю background-size, все будет нормально ... есть еще советы?

Временное исправление, используйте:

b ackground: url ("... base64 ...")

и не используйте

Кроме того, не используйте «спрайты», потому что html2canvas, похоже, этого не понимает.

У меня проблема с фоновыми изображениями, когда URL-адрес содержит относительный путь к фону верхнего каталога: url ("../ i / alerts-16x.png")

Он работает, если переместить png следующим образом: url ("i / alerts-16x.png")

Я не мог визуализировать фоновые изображения, и казалось, что они покрывают или содержат размер фона, поэтому я изменил строку 350 в версии 0.4.1 на:

topPos = isNaN (parseInt (bgposition [1], 10))? topPos: parseInt (bgposition [1], 10);

и это работает!

Я на версии 0.4.1

У меня также проблемы с фоном.

Я поменял live 350, как предложил fperich, но не помогло.

Также попробовал фоновое изображение base64, рекомендованное hernan, тоже без радости.

URL-адрес, который я пытаюсь преобразовать, - это
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Он преобразуется с фоном, когда я использую здесь средство визуализации веб-страниц
http://html2canvas.hertzen.com/screenshots.html

Но на моей странице у него нет фона. См. Образец здесь
http://prompter.rareapps.org/prompt/prompt-save3.php?p=123

Код, который я использую, это

<script type="text/javascript">
$(window).load(function() {
    html2canvas(document.body, {
        onrendered: function(canvas) {
        window.location.href = canvas.toDataURL('image/jpeg');
    },
    allowTaint: true,
    taintTest: false
    });
});
</script>

Это в основном позволяет странице загружаться и преобразовываться в изображение.

Что-то не так с моим кодом?

Спасибо

фперич у рока мужик !! Благодарность

Подтверждаю, фперич, ты сейчас мой самый любимый человек!

Спасибо fperich: D получилось хорошо

@shauchenka @niklasvh Вы бы сказали, что эта проблема решена? Можно / нужно закрыть этот вопрос?

При использовании версии 0.4.1 (последняя версия и последняя версия для разработчиков) фоновое изображение моих дочерних элементов (дочерние элементы - это спрайты) не отображается на холсте, по крайней мере, в Chrome для Windows. Однако Firefox для Windows работает нормально. В Chrome для Mac я получаю черный квадрат, где находится промежуток с фоновым изображением. Я попробовал исправить fperich, но у меня это не сработало. Фоновое изображение находится в одном источнике, все файлы находятся в одном каталоге на сервере.

@ 4gstudios Можете ли вы поместить упрощенный пример в jsfiddle (или по какой-либо общедоступной ссылке), чтобы продемонстрировать проблему?

@usmonster конечно. Я не использовал jsfiddle, потому что не хотел, чтобы изображения были внешними, поэтому мы можем исключить проблемы с перекрестным происхождением.

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

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

посмотрите мой пример: http://4gstudios.com/html2canvas/

синяя рамка отображается нормально (изображение bg составляет 100x7800 пикселей / 374 КБ)
красный прямоугольник отображается некорректно (изображение bg имеет размер 100x25000 пикселей / 254 КБ)
-в OS X Chrome (черный ящик)
-OS X Safari (поле «нет»)
-и, вероятно, Win Chrome (происходило вчера, но не возле банкомата ПК)
-OS X Firefox работает нормально.

Надеюсь, я хорошо проиллюстрировал, что, по моему мнению, является проблемой, и мы можем ее решить. спрайт, который я хочу использовать в своем проекте, имеет более 800 различных правил CSS, и я ДЕЙСТВИТЕЛЬНО не хочу его менять!

изменить: в моем примере используется 0.4.1, но у меня такая же проблема, когда я пробовал 0.5.0rc1

У меня нет OS X для тестирования, но, похоже, она отлично работает в Chrome 37 в Windows (Vista) и бета-версии Chrome 38 в Linux (Debian wheezy). Какую версию Chrome вы используете? Вы пробовали тестировать в режиме инкогнито / с отключенными всеми расширениями?

@usmonster Просто попробовал Chrome 36 (Win7), а затем обновился до Chrome 37 (Win7), проблема все еще не устранена.

@ 4gstudios, если включить ведение журнала, что вы увидите в консоли браузера?

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

В-третьих, также проверьте, появляется ли эта проблема, даже если все расширения Chrome отключены. (Если это так, мне интересно, не проблема ли это во времени, например, возможно, загрузка и / или рендеринг изображения происходит слишком медленно?)

@usmonster

1) ведение журнала ....
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 html2canvas.js: 21

2) Обновлено до основной ветки html2canvas.js

3) Да, пробовал со всеми отключенными. Если это время, я не думаю, что это время загрузки, но рендеринг вполне возможно да.

@ 4gstudios У вас есть еще одна машина для тестирования? Кроме того, живая ссылка по-прежнему выглядит так, как будто использует версию 0.4.1.

@usmonster ой хорошо, я исправил это. только что протестировал его также на машине WinServer2012, Chrome 37, такая же проблема с рендерингом черного ящика вместо bg

Хм, я все еще не могу воспроизвести проблему ни на одной из моих доступных машин, но мой коллега мог на своей машине с Windows 7. @niklasvh , @brcontainer есть идеи? Я думаю, что это как-то связано с композитингом / растеризацией с ускорением на GPU. Я попробую протестировать это позже на этой неделе, если я смогу получить доступ к моей машине W7, но мне любопытно ... @ 4gstudios , что произойдет, если вы уменьшите вдвое второе изображение и повторите попытку? И продолжайте уменьшать его вдвое (и корректировать правило CSS), пока, возможно, ошибка не исчезнет? Я хочу посмотреть, есть ли «интересная» область PNG, которая вызывает эту проблему.

@usmonster Произошел на моей Windows 7 x64 с Chrome. Я постараюсь сделать ОТЛАДКУ.
Есть некоторые проблемы, которые возникают в windows7x64, но не возникают в версии 32, я считаю, что это ошибка Chrome.

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

Хотя разные результаты не связаны напрямую с размером исходного изображения, разные результаты дадут вам представление о проблемах с большими изображениями и холстами:

• http://stackoverflow.com/questions/6081483/maximum-size-of-a-canvas-element
• http://social.msdn.microsoft.com/Forums/windowsapps/en-US/53c368e5-042b-4c3f-8903-ee024f4f7933/canvas-max-size?forum=winappswithhtml5
• https://developer.apple.com/library/safari/documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html#//apple_ref/doc/uid/TP40006482 -SW15

Вероятно, следует настроить некоторые тесты как для максимальных размеров изображений, так и для размеров холста для разных браузеров / ограничений ОС / памяти, чтобы на самом деле получить более твердое понимание, где находятся ограничения и можно ли их каким-то образом обойти, например, разделив рендеринг на более мелкие фрагменты. .

@ 4gstudios @brcontainer сколько памяти у ваших устройств, где вы смогли воспроизвести проблему?

@niklasvh

• Windows 7 Домашняя расширенная x64
• Процессор Intel Core i5 M450 2,40 ГГц
• 4 ГБ оперативной памяти

Я буду тестировать на Windows 32bit (возможно), но я считаю, что проблема возникает только в Windows64bit

как я и подозревал, проблема возникает только в "Windows x64", а также https://github.com/niklasvh/html2canvas/issues/206#issuecomment -17744888, другими словами, работа в 32-битной Windows, сбой в 64-битной Windows , одна вероятная ошибка Chrome.

@brcontainer проблема возникает у меня в Chrome и Safari на OS X 10.7 ...

Я также тестировал на своей 32-битной машине с Windows 7, и все работает нормально (без ошибок). Это определенно похоже на проблему только с 64-битной системой - хороший улов, @brcontainer! Также следует отметить, что совсем недавно была выпущена новая версия Chrome специально для 64-битных систем:

http://blog.chromium.org/2014/08/64-bits-of-awesome-64-bit-windows_26.html
https://www.google.com/chrome/browser/?platform=win64 (ссылка для загрузки Windows)
http://blog.chromium.org/2014/08/mac-chrome-when-im-sixty-four-bits.html (Mac все еще находится в стадии бета-тестирования)

Для тех, кто столкнулся с этой проблемой, вы уверены, что еще не используете 32-разрядную версию? Я думаю, вам нужно вручную скачать 64-битную версию, чтобы получить ее. Есть шанс, что это может решить эти проблемы.

@usmonster ну моя Windows7 64-битная. Ошибка затрагивает как 32-битный, так и 64-битный Chrome на 64-битной Win7. Я предполагаю, что это также влияет на некоторые машины OSX. Спасибо за ссылку для получения 64-битной версии Chrome, хотя это не решает мою проблему: cry:

это похоже на ошибку в Chrome, а не на несовместимость с «64-битной Windows» (или Mac OSX)

@brcontainer Я согласен с тем, что это похоже на проблему с браузерами Chrome и WebKit в 64-битных Windows и Mac (но не в Linux ... по крайней мере, не в моем 64-битном Debian-боксе с 8 ГБ ОЗУ), хотя @ 4gstudios были вы можете увидеть ошибку в 32-битной Windows? И сколько оперативной памяти было у вас на машинах, затронутых этой проблемой?

Было бы неплохо иметь возможность устранить эту проблему до ее корня. Второй PNG имеет градиенты и гораздо большие размеры, чем первый PNG. Если бы у меня была пораженная машина для тестирования, я бы вырезал «плохой» PNG, пока не смог бы определить, есть ли конкретная проблемная область или размер, которая вызывает это. (Возможно, также представляет интерес для @niklasvh : http://wkbug.com/52391)

@usmonster @niklasvh

В AppleWebkit (версия 538.1) и «Safari 5.1.7» (версия 534.57.2 - этот браузер не получает больше обновлений) для Windows .then не выполняет (не запускается / не запускается).

Поэтому я не мог проверить, является ли это отказом «Webkit» или отказом «Blink» (форк движка Webkit в Chrome) или даже отказом из-за нехватки «ОЗУ».

@brcontainer Я думаю, можно с уверенностью предположить, что, поскольку, согласно @ 4gstudios , ошибка воспроизводилась как в Safari, так и в Chrome на OS X, по крайней мере, это ошибка, общая для движков Blink и WebKit.

@usmonster Мне не удалось проверить окна, потому что .then(...) не запускается в AppleWebkit (версия 538.1)

@usmonster При создании своего примера я сделал кое-что еще, но не сверхнаучным способом. Я постараюсь лучше задокументировать это, когда у меня будет немного времени, но, вероятно, этого не произойдет в течение недели или около того.

@usmonster , @brcontainer , @niklasvh , спасибо за вашу помощь в

@niklasvh onrendered устарел. Итак, что я могу использовать вместо этого? Я использую 0.5.0-alpha1.

Также не загружается фоновое изображение, хотя изображения находятся в том же домене.

html2canvas ($ ("# foredownload table"), {
ведение журнала: правда,
onrendered: function (c) {
var myImage = c.toDataURL ("изображения / JPEG");
$ ('# downloadableImage'). prop ('href', myImage);
}
});
Любая помощь будет оценена по достоинству. Спасибо

@ codegiant2 https://github.com/niklasvh/html2canvas#usage .

Спасибо fperich, у меня это сработало !!

@fperich
Ты мне очень помог! Большое спасибо!

Я был лицом кадрированного фонового изображения тела
(small bounds.height от NodeContainer.prototype.parseBackgroundSize - html2canvas 0.5.0-beta3) мой

body {
    background-image: url(./res/bg.jpeg);
    background-repeat:no-repeat;
    background-position:center center;
    -o-background-size: cover;
    -moz-background-size: cover;
    -webkit-background-size: cover;
    background-size: cover;
}

РЕШЕННОЕ добавление

html, body {
   margin: 0;
   padding: 0;
   height: 100%;
}

Спасибо niklasvh и всем участникам за этот красивый фрагмент кода!

У меня также возникла такая же проблема, я загружаюсь из изображения s3, которое не отображается на холсте, но я загружаю локально, моя система работает нормально, как я могу решить

у меня тоже такая же проблема.

Не удалось загрузить фоновое изображение. Я получаю сообщение об ошибке Ошибка загрузки фона:

jsFiddle здесь

Пожалуйста, помогите мне решить эту проблему.
Спасибо,

Привет @gopiss!

Используйте вариант корса.

html2canvas(document.body, {
            onrendered: function (canvas) {
.....
            },
            useCORS: true
        });

@fxmontigny.
По-прежнему существует проблема с загрузкой изображения границы . см. мой обновленный JSFiddle .
изображение границы не загружается, отображается только черная цветная рамка.

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

Это все еще проблема с версией 1.0.0 ? Если да, не могли бы вы поделиться примером на jsfiddle .

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

Просто комментируйте, поскольку это может кому-то помочь.
Моя проблема заключалась в том, что локально все работало, но на производстве не удавалось отображать фоновые изображения css.
Причина заключалась в том, что мы использовали CloudFront - это означает, что URL-адреса в файле css ссылались на активы в домене CloudFront, в то время как JS выполнялся в отдельном домене.
Однако журнал html2canvas не указывал, что это проблема cors.
'useCORS', похоже, не работает сам по себе, поскольку я думаю, что для этого требуется URL-адрес прокси или что-то в этом роде.

@jacobclarke для меня также