Генерация изображений png24 с альфа из кода div css

217
user3450548

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

<div style="width: 500px; height: 400px; background: rgba(255,0,0,0.2); color: #000000; border-radius:5px; padding:20px 10px; text-align: center; font-family: Verdana"> Some text, html code, images and everything else... </div>

И иметь изображение PNG24 с альфа 500 х 400 в качестве вывода.

В частности, я хотел бы автоматизировать этот материал и экспортировать различные PNG в папке с шаблоном имени ..

Я использую Mozilla Firefox и Google Chrome ... может быть, веб-расширение, библиотека Javascript могла бы добиться цели ..?

1
Посмотрите на html2canvas: https://html2canvas.hertzen.com/ Leun4m 6 лет назад 1
@ Leun4m выглядит красиво, но .. поддерживает альфа? user3450548 6 лет назад 0
что ты имеешь в виду под * альфа *? Leun4m 6 лет назад 0
@ Leun4m я имею в виду прозрачность .. допустим, вы экономите div с непрозрачностью: 25%; и вы импортируете его в фотошоп .. он сохранит прозрачность или будет польщен? user3450548 6 лет назад 0
Это работает, когда вы устанавливаете background-color в null: https://jsfiddle.net/98fgrxbk/5/ Leun4m 6 лет назад 1
@ Leun4m круто, может быть хороший вариант, так. Что я хотел бы понять, так это то, что его библиотека просто анализирует код CSS и конвертирует его в canvas или все еще использует собственный механизм рендеринга браузера и может экспортировать его как изображение. Если это первый случай, это хорошо, но было бы очень здорово, полагаться на собственный движок браузера для экспорта. Также есть проблема с html2canvas, вам нужно вручную сохранять изображения правой кнопкой мыши .. Мне нужно они будут автоматически экспортированы в путь. user3450548 6 лет назад 0
Хороший вопрос. http://html2canvas.hertzen.com/documentation> About, объясняет **, как он работает ** и что он не работает со всеми функциями CSS (также есть список в документе). Leun4m 6 лет назад 1
@ Leun4m в этом случае кажется, что он выполняет синтаксический анализ CSS и заново создает эффект внутри кода холста .. :( user3450548 6 лет назад 0

0 ответов на вопрос

Похожие вопросы