Визуализация преобразованных элементов css3 в canvas / image

Question

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

1. несколько прозрачных фонов
2. CSS 3D Transforms

И html2canvas просто терпит неудачу там. Есть ли в настоящее время какой-либо способ аккуратно сохранить представление изображения текущего состояния элемента DOM со всей его славой CSS3?

Answer 1

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

Лучше всего ставить html2canvas плюс ваши собственные хаки,Возможно, вам просто потребуется реализовать собственный код рендеринга в соответствии с вашими требованиями.Несколько фонов должны быть выполнены с помощью вызовов drawImage, и вы сможете работать с преобразованиями css3, когда canvas 2D получит setTransform () (что, я думаю, только в следующей версии спецификации).

Answer 2

На данном этапе разработки CSS3 и поддержки кроссбраузера это, вероятно, невозможно без написания собственного расширения html2canvas.

Вы можете попробовать зайти в репортер ошибок Google Chrome, поскольку они позволяют отправлять текущий снимок веб-страницы.,Но я думаю, что это какая-то внутренняя функция, которая недоступна в JS api.

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