Pełna wersja: Usunięcie jednego koloru z obrazka
Witam. Czy istnieje możliwość zmienienia jednego koloru w obrazku na przezroczysty? Zależy mi, żeby zrobić to w JS, ponieważ chcę zstosować element canvas do wiświetlenia kilku nałozonych na siebie obrazów, z których każdy ma tło o kolorze czarnym, które należy usunąć.
Tak. Lecisz po pixelach, jeśli czarny to zamień kolor tego pixela na RGBA( 0, 0, 0, 127 )
Czy byłbyś tak mily i podal przykladowy kod?
TO powinno Ci pomóc.
Dzięki wielkie!
EDIT: Działa, ale jest mały problem. Potrzebuję usunąć czarny kolor przed dodaniem obrazka do contextu, ponieważ gdy go najpierw dodam zniknie to co jest pod czarnym. Proszę o pomoc.
EDIT: Działa, ale jest mały problem. Potrzebuję usunąć czarny kolor przed dodaniem obrazka do contextu, ponieważ gdy go najpierw dodam zniknie to co jest pod czarnym. Proszę o pomoc.
To spróbuj zrobić jeden canvas buforowy, w którym "obcinasz" obrazek z czarnego a potem wklejasz na główny i tak z każdym obrazkiem...
A jak sprawić, żeby buforowy canvas był ukryty?
display:none
Zrobiłem coś takiego
Plik a.bmp:
Plik b.bmp:
Wynik:
Co robię źle?
Wiem, żę kod jest zamieszany, ale to tylko próbny kod, który oczysczę przed wrzuceniem na strone.
EDIT: Nie ważne, rozwiązałem problem.
Kod
<canvas id="blok" width="500" height="500">
error
</canvas>
<canvas id = 'buff' style="display:none" />
<script type="text/javascript">
var buff = document.getElementById('buff');
var canvas = document.getElementById('blok');
var ctx = canvas.getContext('2d');
var buffctx = buff.getContext('2d');
var img = new Image();
img.src="b.bmp";
ctx.drawImage(img, 0,0);
img = new Image();
img.src="a.bmp";
buffctx.drawImage(img,0,0);
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
var imgdata = buffctx.getImageData(0, 0, img.width, img.height);
var pix = imgdata.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
if (pix[i] + pix[i + 1] + pix[i + 2] == 0)
{
pix[i] = 0
pix[i+1] = 0
pix[i+2] = 0
pix[i+3] = 127
}
}
ctx.putImageData(imgdata, 30, 0);
</script>
error
</canvas>
<canvas id = 'buff' style="display:none" />
<script type="text/javascript">
var buff = document.getElementById('buff');
var canvas = document.getElementById('blok');
var ctx = canvas.getContext('2d');
var buffctx = buff.getContext('2d');
var img = new Image();
img.src="b.bmp";
ctx.drawImage(img, 0,0);
img = new Image();
img.src="a.bmp";
buffctx.drawImage(img,0,0);
netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");
var imgdata = buffctx.getImageData(0, 0, img.width, img.height);
var pix = imgdata.data;
for (var i = 0, n = pix.length; i < n; i += 4) {
if (pix[i] + pix[i + 1] + pix[i + 2] == 0)
{
pix[i] = 0
pix[i+1] = 0
pix[i+2] = 0
pix[i+3] = 127
}
}
ctx.putImageData(imgdata, 30, 0);
</script>
Plik a.bmp:
Plik b.bmp:
Wynik:
Co robię źle?
Wiem, żę kod jest zamieszany, ale to tylko próbny kod, który oczysczę przed wrzuceniem na strone.
EDIT: Nie ważne, rozwiązałem problem.
To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.