HTML5 Canvas DrawImage без альфы

Я хотел бы знать, можно ли не использовать альфа-канал, но сохраняя прозрачность. Мне нужно рисовать или не рисовать пиксель (из моего файла png) в зависимости от значения альфа

Если альфа-канал> 128, рисуйте пиксель, иначе не рисуйте пиксель!

Спасибо


person webshaker    schedule 16.08.2011    source источник


Ответы (1)


Вероятно, есть несколько способов сделать это.

Один из способов — просто нарисовать изображение, а затем вызвать getImageData

Просмотрите каждый пиксель в данных изображения и, если альфа-компонент ‹= 128, сделайте этот пиксель полностью прозрачным.

Затем верните измененные данные изображения с помощью putImageData

Это по памяти, может я что-то упустил:

var imageData = ctx.getImageData(0,0,picwidth, picheight);
var pixels = imageData.data;
var numPixels = pixels.length;

ctx.clearRect(0, 0, can.width, can.height);

for (var i = 0; i < numPixels; i++) {
    if (pixels[i*4+3] <= 128) pixels[i*4+3] = 0;
}
ctx.putImageData(imageData, 0, 0);
person Simon Sarris    schedule 16.08.2011
comment
ну на самом деле это не то, что я ищу. Я хотел бы изменить изображение, а не холст. Я хочу сделать предварительную настройку, прежде чем копировать изображение ... - person webshaker; 17.08.2011
comment
Таким образом, вы должны сделать то же самое, что и выше, за исключением того, что нарисуйте изображение на холсте в памяти. Поэтому используйте document.createElement('canvas'), чтобы создать новый холст, нарисуйте на нем изображение, примените описанные выше операции, а затем нарисуйте этот холст на свой обычный холст. (ctx.drawImage(tempCanvas, 0, 0)) - person Simon Sarris; 17.08.2011
comment
Ах хорошо. Благодарность. Я буду стараться. но это означает, что холст может иметь альфа-канал. Я попробую... Будет здорово, если получится. - person webshaker; 17.08.2011
comment
Все холсты имеют альфа-канал. На самом деле холст по умолчанию прозрачный черный (он же rgba(0,0,0,0)) - person Simon Sarris; 18.08.2011