Нарисуйте все пиксели (исключая прозрачность) в PNG с помощью Javascript/CSS?

Мне нужно создать силуэт PNG с Javascript/CSS. Это возможно?Нарисуйте все пиксели (исключая прозрачность) в PNG с помощью Javascript/CSS?

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

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

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

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

источник

2010-01-24 richard

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

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

В <canvas> можно было бы использовать composite operation, например, сначала рисовать изображение, а затем рисовать один цвет сверху с помощью режима source-out.

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

Это будет много обнюхивающего и раздражающего браузера. Я постараюсь избежать этого.

источник

2010-01-24 13:16:57 bobince

Спасибо, я попробую ваши предложения. Я забыл упомянуть, что ему нужно работать только в браузерах webkit. – richard

Композиция холста отлично :) – richard

Учитывая, что вы отметили это webkit, вы должны взглянуть на Surfin' Safari blog post about CSS masks.

E.g. Это то, что вы хотите?

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

источник

2010-01-24 13:21:31 mercator

Маски не то, что я ищу. Кроме того, если я могу замаскировать каждый цветной пиксель, исключая прозрачные. – richard

Нарисуйте все пиксели (исключая прозрачность) в PNG с помощью Javascript/CSS?

ответ

Смежные вопросы