Может ли html5 canvas дать скриншот любому элементу dom?

Question

Я знаю, что метод drawimage Canvas может рисовать HTMLImageElement, HTMLCanvasElement, HTMLVideoElement

, но если я хочу нарисовать скриншот контейнера div?

Я знаю библиотеку html2canvas.Я не совсем понимаю, что это за документ и его API, я думаю, что он не гибкий. Так что я хочу написать его самостоятельно? Как мне этого добиться?

Answer 1

Это не очень просто. Вы должны рекурсивно перебрать все дочерние узлы, определить их вычисленные стили и вручную нарисовать их представления.

Например, что-то вроде

<div style="border: 1px solid red; background: blue;">foo</div>

требует следующих шагов:

• Определите размеры и положение div (getComputedStyle)
• соответственно нарисуйте синий прямоугольник
• соответственно нарисуйте контур красного прямоугольника
• Определить стиль вычисляемого шрифта и отступы
• Добавить текст "foo" с этой позицией и стилем

Это в основном то, что делает html2canvas, и для этого не существует нативного API Canvas.