Изменить стиль в JavaScript, не влияя на то, что отображается в браузере - PullRequest
Новая
       25

Изменить стиль в JavaScript, не влияя на то, что отображается в браузере

3 голосов
/ 12 апреля 2019

Я извлекаю несколько блоков, которые разбросаны по странице, рисую их на холсте с помощью Canvas​Rendering​Context2D.draw​Image(), а затем экспортирую холст в PDF / JPG.

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

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

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

Есть идеи, как это сделать правильно? Я склонен идти на что-то вроде эмуляции. Имейте весь «стиль экспорта» под собственным @print и эмулируйте его, прежде чем рисовать блоки на холсте, не влияя на то, что отображается в браузере, но я не уверен, возможно ли это.

Ответы [ 2 ]

1 голос
/ 16 апреля 2019

Я думаю, что вы можете использовать node.cloneNode(true), чтобы сделать глубокий клон для всех этих блоков, поместить их в общий корень с именем класса, который скрыт от глаз пользователя, а затем тайно изменить их стиль.

Так какВы модифицируете клонированную версию узлов, оригинал остается нетронутым.Кроме того, используя область видимости имени, ваш CSS может точно нацелить этих клонов.

1 голос
/ 12 апреля 2019

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

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

Это означает, что у вас есть несколько вариантов интерфейса. Например, вы могли бы «спрятать» экран, поместив модальную часть поверх всего сообщения с сообщением, которое «обрабатывает мгновение». Тогда решение класса body (или другого элемента) работает.

Вы можете скопировать элементы, как вы предложили. Если вы пойдете по этому пути, я переместу копии с экрана, пока вы меняете их. 

 .element {
   position: fixed;
   left: -100vw;
 }

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

С другой стороны, вы могли бы переложить усилия на service worker? Это потребует копирования в память, НО он полностью отсоединен от DOM и работает в другом потоке.

Хотя это действительно интересная проблема!

...