Рисовать все пиксели (кроме прозрачных) в PNG с помощью Javascript / CSS? - PullRequest
Новая
       11

Рисовать все пиксели (кроме прозрачных) в PNG с помощью Javascript / CSS?

2 голосов
/ 24 января 2010

Мне нужно создать силуэт PNG с помощью Javascript / CSS. Возможно ли это?

Я попробовал следующее: Стек PNG с пониженной непрозрачностью несколько раз с абсолютным позиционированием и z-индексом. Это не работает.

К сожалению, я не могу использовать PHP или что-то еще, кроме Javascript и CSS.

У меня есть некоторые идеи с оверлеями и тому подобное, но я не могу понять, как это сделать. Любые советы?

обновление: это должно работать только в браузерах webkit, так что вы можете принести свой трюк с webkit! :)

Ответы [ 2 ]

3 голосов
/ 24 января 2010

Это невозможно в простом HTML / CSS.

Во встроенном SVG можно использовать фильтр , например feColorMatrix, для установки всех каналов на один цвет, кроме непрозрачности.

Это было бы возможно в <canvas> с использованием составной операции , такой как сначала рисование изображения, затем рисование одного цвета поверх в режиме source-out.

Это может быть возможно в IE, используя MaskFilter , используя MaskFilter для генерации маскирующего цвета (например, белого), наложенного поверх фиксированного цвета (например, черного). Однако я думаю, что вы потеряете все плавные края с переменной непрозрачностью.

Будет много нюхать и раздражать браузер. Я бы постарался избежать этого.

1 голос
/ 24 января 2010

Учитывая, что вы пометили это как webkit, вам следует взглянуть на блог Surfin 'Safari о CSS-масках .

например. Это то, что вы хотите? 

<!doctype html>
<style>
div {
    width: 215px;
    height: 174px;
    background: black;
    -webkit-mask-image: url("http://webkit.org/images/icon-gold.png");
}
</style>
<div></div>
...