Как захватить изображение HTML-элемента и сохранить прозрачность?

Question

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

Но на самом деле это не то, что я хочу.изображение элемента HTML и поддержание прозрачности?

РЕДАКТИРОВАТЬ: я просто копаюсь в этом, поэтому я сталкиваюсь с новыми темами, такими как HTML5 Canvas и -moz-element.Можно ли установить фон холста для элемента html с помощью -moz-element, а затем извлечь данные изображения из холста?Я собираюсь попробовать это, если кто-то, кто "был там сделан, который" не уводит меня.

РЕДАКТИРОВАТЬ: -moz-element и canvas были dedend.-moz-element установит элемент в качестве фона, но не позволит вам сохранить фоновое изображение.И холст не сохраняет свой фон, даже если фон является обычным изображением.

Answer 1

Это требует немного работы, но это выполнимо, пока вы выкладываете HTML.Вы не можете восстановить прозрачность разметки на загруженных страницах без сохранения этих страниц и их локального редактирования.Рендеринг HTML-элементов несколько раз на разных цветах фона позволяет получить непрозрачность с помощью графического редактора.Вам понадобится приличный редактор изображений, я использую GIMP.

1. Визуализация элементов, которые вы хотите сохранить три раза, на черном, белом и нейтральном сером фоне (#888).

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

3. В GIMP откройте эти изображенияв качестве слоев и упорядочите их черным, белым и серым сверху вниз.

4. Установите верхний черный слой в режим разницы.Это даст разницу в оттенках серого между черным и белым слоями.

5. Слейте верхний слой.Это оставит нас с двумя слоями.Серый фоновый слой и разница в оттенках серого.Инвертируйте цвета разностного слоя и скопируйте его в буфер обмена.

6. Добавьте маску слоя в серый фоновый слой и вставьте буфер обмена в маску слоя.

7. Удалите слой в градациях серого и примените маску слоя к серому фоновому слою.Это должно оставить один слой с непрозрачностью, аналогичной оригиналу.

8. Непрозрачность немного отключится, но если мы дублируем слой и объединяем его с самим собой, он находится прямо на площадке.

Возможно, он не идеален по пикселям, но это доказательство концепции.Непрозрачность HTML-разметки может быть зафиксирована.

Answer 2

Вам нужен веб-браузер, который может отображать в буфер изображения в памяти вместо экрана.

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

Если вы загружаете исходные коды WebKit, должны быть тестовые случаи, которые делают что-то подобное: - /

Answer 3

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

Я думаю, что вам лучше всего воссоздать нужную часть в виде изображения, где вы можете нормально контролировать прозрачность. Это не лучшее решение, но если вы много делаете с одними и теми же вещами, это будет гораздо быстрее для вас, чем для обрезки / редактирования скриншотов.