Есть ли у <canvas>способ установить индекс прозрачности для PNG? - PullRequest
Новая
       22

Есть ли у <canvas>способ установить индекс прозрачности для PNG?

1 голос
/ 25 марта 2011

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

Ответы [ 3 ]

2 голосов
/ 25 марта 2011

В зависимости от того, чего вы хотите достичь, есть несколько способов.

Во-первых, Если вы просто хотите отобразить изображение с цветом для прозрачности, вам не нужен холст. Вы можете просто добавить стили CSS к изображению: 

<img src="theURL" style="background-color: red;">

Допустим, вы хотите холст.Самый эффективный способ - сначала нарисовать цвет, а затем изображение.

Другой способ - нарисовать изображение на холсте, установить для globalcompositeOperateion значение destination-over, а затем заполнить область изображения.с нужным цветом. 

ctx.drawImage(img,0,0);
ctx.globalCompositeOperation = 'destination-over'
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,280,210); // if the width and height are 280x210

Смотрите его в действии здесь, заменив прозрачный фон синим:

http://jsfiddle.net/MEHbr/327/

Я бы не советовал использовать getImageData и putImageData, если вам не нужен точный контроль за пикселями, так как они намного медленнее.

Для сохранения изображения, canvas2Image предлагает лучшие варианты:

http://www.nihilogic.dk/labs/canvas2image/

1 голос
/ 25 марта 2011

Да, возможно, вы должны использовать getImageData и putImagaData

Ссылка 

imageData = canvasContext.getImageData( 0, 0, canvasContext.canvas.width, canvasContext.canvas.height );

for( i = 0; i < imageData.length; i+= 4 ) {
        imageData[i+3] = opacityValue;
}

canvasContext.putImageData(imageData, 0, 0 );

Вот пример, который делает то, что вы ищете, (а также то, из чего был взят вышеупомянутый фрагмент)

http://labs.josh -ho.com / getImageData /

0 голосов
/ 25 марта 2011

Вы можете создать новый класс для вашего холста и создать CSS для его стилизации: 

.canvas_class{  
 -moz-opacity:0.5; /* For older FF versions */  
 -khtml-opacity:0.5;  
 opacity:0.5;  
}

Затем вы можете использовать библиотеку jQuery , чтобы изменить DOM live: http://api.jquery.com/attr/

Надеюсь, это поможет вам добавить изменчивую прозрачность к вашим полотнам: D

...