Html2canvas: Сопоставление с остановкой цвета завершается ошибкой TypeError из-за неправильного регулярного выражения

Запрос на вытягивание с исправлением и тестами для его поддержки было бы отлично!

Попробую взглянуть на этих выходных. Примечание для себя:
https://developer.mozilla.org/docs/Web/CSS/color_value
https://developer.mozilla.org/docs/Web/CSS/gradient
http://stackoverflow.com/a/12456392/357774

Что касается реализации вставки в стиле границы, необходимо также получить общий синтаксический анализ для цветов, поскольку он должен затемнять / осветлять цвета на определенный процент. С этим исправлением градиента, если есть необходимость в синтаксическом анализе цветов в общий формат, это также может быть полезно с border-style: inset.

Например, если какой-либо цвет (шестнадцатеричный, rgb, rgba, hls, hlsa, предопределенное имя, такое как «красный», «зеленый» и т. Д.) Может быть проанализирован в объект Color с определенными значениями r, g, b и a, он будет значительно упростить реализацию вставки границ.

Согласились с тем, что общий синтаксический анализ / представление цвета можно и нужно использовать повторно. Буду иметь в виду и, наверное, возникнут вопросы.

У меня не было возможности взглянуть на это на выходных, возможно / надеюсь, у него будет время завтра.

Есть новости по этому поводу?

Эээ, извините, еще нет. : / Был перегружен и имел ограниченные вычислительные ресурсы, хотя я установил некоторые тесты локально (еще ничего не реализовал).

Я добавил базовый синтаксический анализ цвета (до сих пор named, rgb, rgba, hex3 и hex6) и изменил все способы использования цвета, чтобы использовать их. Регулярные выражения градиента еще не обновлены.

См. Https://github.com/niklasvh/html2canvas/commit/313c227a1fed416331978e365ef82000ea7f7aa5

Отлично! В эти выходные я посмотрю, как обновить эти регулярные выражения.

@niklasvh Можете ли вы взглянуть на коммит, который я только что сделал в своей ветке (359ee8b), и сообщить мне, что вы думаете? Я удалю свои лишние комментарии и скоро добавлю тесты для названий цветов, но не могли бы вы также взглянуть на другое изменение?

Я исправил синтаксический анализ направления для Firefox, поэтому некоторые линейные градиенты, которые раньше не отображались правильно, теперь должны работать. Вы можете увидеть ручной тест, который я только что временно вставил в tests/lineargradients_manual.html (в основном копию tests/cases/background/linear-gradient.html ). Я полагаю, что смогу проверить повышение точности и отсутствие регрессов в других браузерах / версиях после запуска тестов на селен, но не могли бы вы убедиться, что это нормально? Я подозреваю, что повышение точности рендеринга можно увидеть только при сравнении более поздних версий FF, чем те, которые были протестированы. (Похоже, что единственная протестированная версия Firefox - 15 ??)

Хм, задержите эту мысль, возможно, я сделал что-то странное, квадраты на моем домашнем компьютере теперь в основном черные ...

Ах, нет, похоже, 498527918c3324dce77260057bc47c280cc3324f - это проблема с фиксацией, мои данные выглядят нормально. : sweat_smile:

Что произойдет, если процент будет отличным от 100% или 0%?

На данный момент он не поддерживает произвольные проценты (оставляет их равными 50% по умолчанию), но я могу добавить это достаточно легко. ( Обновление : добавлена ​​поддержка произвольных процентов: 6af1874dc04c81d1aba5d6e8e6c8ef69681a2e49.)

В чем я не уверен, так это в непроцентных длинах, которые могут быть в px , em , rem , ex , cm , mm , in , pc , pt и т.д ... Я еще не искал это в коде, но у вас уже есть способ обрабатывать / преобразовывать длины различных единиц? (Если нет, должно ли это стать частью этой функции или ее следует реализовать отдельно?)

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

@niklasvh У меня ветку fix-firefox-gradients и прокомментировать, прежде чем я сделаю запрос на перенос?

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

Спасибо! Вскоре мы рассмотрим это подробнее и свяжемся с вами с любыми отзывами, которые у меня могут быть.

Есть ли в этом прогресс? Это еще нужно!

Я готов сделать пул-реквест, если одобрить подход, который я использовал в своей ветке.

: +1: Я только что столкнулся с этим:

TypeError: Cannot read property '1' of null at GradientContainer.<anonymous> (http://localhost:8100/all.js:34496:44) 
at Array.map (native) 
at GradientContainer.LinearGradientContainer (http://localhost:8100/all.js:34493:66)
at ImageLoader.279.ImageLoader.loadImage (http://localhost:8100/all.js:34367:16) 
at ImageLoader.<anonymous> (http://localhost:8100/all.js:34339:46) 
at Array.forEach (native) 
at ImageLoader.279.ImageLoader.addImage (http://localhost:8100/all.js:34337:23) 
at Array.forEach (native) 
at ImageLoader.279.ImageLoader.findBackgroundImage (http://localhost:8100/all.js:34331:71) 
at 295.exports.bind (http://localhost:8100/all.js:36357:25)

Привет, @niklasvh! Спасибо за исправление # 526.

Вы когда-нибудь видели мою ветку fix-firefox-gradients ? Я бы перебазировал свою ветку (и исправил любые новые конфликты), прежде чем делать PR, но, пожалуйста, дайте мне знать, будет ли PR по-прежнему приветствоваться. (Как вы думаете, сможете ли вы просмотреть его в разумные сроки?) Спасибо!

@usmonster Нет, извини, я это пропустил. Одна потенциальная проблема, о которой я подумал при выполнении этого исправления, заключается в том, что если браузер решит не преобразовывать именованные цвета, такие как red или blue в соответствующие rgb или rgba values, простой учет transparent не сработает. Модуль Color учитывает все различные цветовые вариации, но я не совсем доволен тем, как выполняется текущий синтаксический анализ в master для начала.

Есть идеи, как обрабатывать названные цвета?

@niklasvh , поиск и нормализация, которые уже выполнены конструктором Color должны быть достаточными для обработки всех названных цветов, если я что-то не понял?

Кроме того, я исправил регулярные выражения, используемые для анализа цветов и линейных градиентов, чтобы сделать их более надежными, правильными и производительными, поэтому я не думаю, что именованные цвета должны быть проблемой. Что вы думаете?

@usmonster Вы правы, я имел в виду https://github.com/niklasvh/html2canvas/compare/master...usmonster : fix-firefox-gradient # diff-48b5afb6985c457b9f79fcca1cfb499dR21, который, как я заметил, учитывает названные цвета, так что никаких проблем. В противном случае все выглядит хорошо, не могли бы вы перебазировать и выставить пул-реквест?

Без проблем! Постараюсь заглянуть в ближайшие пару дней - я вроде как пропустил свое окно выходных. : /

@niklasvh См. # 708. :)

Я получил «TypeError: colorStopMatch is null» в html2canvas.js: 1454: 13 в FireFox. В Chrome это работает.

Привет @ Observer999! Этот вопрос закрыт. Найдите аналогичную открытую проблему или создайте новую проблему со ссылкой на страницу, которая воспроизводит возникшую у вас проблему. (Пожалуйста, также укажите там, в какой версии Firefox вы тестировали.) Я могу представить, что это может иметь какое-то отношение к TODO в коде .. Спасибо!

@usmonster @niklasvh Привет, ребята, я знаю, что эта проблема закрыта, но я использую последнюю версию html2canvas и получаю ту же ошибку в последней версии Chrome, но в Firefox она работает.

html2canvas.js: formatted: 1377 Uncaught (в обещании) TypeError: невозможно прочитать свойство '1', равное нулю
в LinearGradientContainer.(html2canvas.js: форматирование: 1377)
в Array.map ()
в новом LinearGradientContainer (html2canvas.js: форматировано: 1374)
в ImageLoader.loadImage (html2canvas.js: форматировано: 1256)
в ImageLoader.(html2canvas.js: форматирование: 1227)
в Array.forEach ()
в ImageLoader.(html2canvas.js: форматирование: 1225)
в Array.forEach ()
в ImageLoader.findBackgroundImage (html2canvas.js: форматировано: 1219)
в html2canvas.js: форматирование: 2563