Html2canvas: Отсутствие рендеринга теневых элементов dom

Вероятно, вам нужно будет изучить парсер узлов (https://github.com/niklasvh/html2canvas/blob/master/src/nodeparser.js) и проверить, есть ли у узла теневой DOM, прежде чем ставить его в очередь для его рендеринга.

Здесь?

negativeZindex.concat (nonInlineNonPositionedDescendants) .concat (nonPositionedFloats)
.concat (inFlow) .concat (stackLevel0) .concat (текст) .concat (positiveZindex) .forEach (функция (контейнер) {
this.renderQueue.push (контейнер);
if (isStackingContext (контейнер)) {
this.parse (контейнер);
this.renderQueue.push (новый ClearTransform ());
}
}, это);

Не могли бы вы мне подсказать, что делать дальше? :)

Вам нужно будет правильно упорядочить узлы там для рендеринга (для получения дополнительной информации см. Http://www.w3.org/TR/CSS21/visuren.html#z-index), но перед этим вам необходимо получить узлы теневого dom для каждого стека контекста.

@fernandezpaco , вы

@niklasvh Кто-нибудь

var node = parentContainer.node; if(node.shadowRoot !== null){parentContainer.node = node.shadowRoot.querySelector('div');

Вышеупомянутые строки в NodeParser.prototype.getChildren действительно отображали элементы shadowDOM.

@niklasvh, можете ли вы подтвердить, что это правильный подход?

К сожалению, это также не удается из-за того, как html2canvas помечает узел, который нужно отрисовать, а затем клонирует весь документ и не может проникнуть в теневой дом с помощью querySelector .

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

@niklasvh, можешь ли ты поделиться ссылкой (https://github.com/niklasvh/html2canvas/blob/master/src/nodeparser.js) снова, она показывает 404.

@niklasvh : Мы сталкиваемся с той же проблемой (невозможно отрендерить SHADOW-DOM), дайте нам знать, работал ли кто-нибудь над этим.

@srajabhoj После перезаписи версии 1.0.0 это, вероятно, https://github.com/niklasvh/html2canvas/blob/master/src/NodeParser.js

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

Мой обходной путь - клонировать контент и CSS, которые вы хотите визуализировать HTMLElement, а затем добавить его в document.body . Установите стиль filter:opacity(0) потому что html2canvas не поддерживает это, но поддерживается в современном браузере. Удалите его после рендера.

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

Вот мой код на Angular

const newRef = this.renderRef.nativeElement.cloneNode(true);
this.renderer.setStyle(newRef, 'filter', 'opacity(0)');
this.renderer.appendChild(document.body, newRef);
html2canvas(newRef).then(canvas => {
     if (canvas.toBlob) {
          canvas.toBlob(
            blob => {
              fileSaver.saveAs(blob, 'image.jpg');
              this.renderer.removeChild(document.body, newRef);
              alert('Image has been downloaded to your device');
            },
            'image/jpg',
            0.8
          );
     }
});

@ Джеффен, это было очень полезно, спасибо! Также очень помогала файловая заставка. На всякий случай, если кому-то интересно, как это работает, я сделал так:

$ npm i file-saver

import * as saveAs from 'file-saver';

saveAs(blob, 'image.jpg');

Есть ли обновления по этой проблеме?
Или какой-либо обходной путь для приложения, имеющего вложенный теневой дом?

html2canvas lib необходимо обновить, чтобы она могла перемещаться по «составному дереву» вместо «светлого дерева».

«Составное дерево» (или «плоское дерево» в других местах) описано в исходном черновике ShadowDOM (нажмите кнопку «свернуть» в красном поле, чтобы остаться на этой странице вместо перенаправления на новую страницу). Не стесняйтесь спрашивать меня, если вы не знакомы с какой-либо концепцией.

Если у всех ShadowRoots есть mode:'open' , это должно быть довольно просто.

Если мы хотим поддерживать ShadowRoots с помощью mode: 'closed' , это будет сложнее и потребует исправления attachShadow , чтобы отслеживать ссылки на теневые корни, чтобы мы могли перемещаться по ним.

После того, как мы знаем , как пройти через «составленное дерево» в целом, то мы должны были бы обновить html2canvas «ы рекурсивного DocumentCloner.cloneNode метода , чтобы он пересечь составленное дерево вместо светлого дерева.

Слот-контент может быть сложнее обрабатывать. Вам нужно будет найти соответствующие слоты, чтобы отобразить контент в нужном месте.

<!--my-component-->
<div><slot name="some-region"></slot></div>
<slot></slot>

<!--my-app-->
<my-component>
  Default Slotted Content
  <button slot="some-region">Button</button>
</my-component>