HTML5 Canvas에서 PNG로 변환하면 알파 투명도 일 때 모든 채널이 0으로됩니다.

Uint32Array가 있습니다. WebGL의 텍스처로 변환하려고합니다. 이렇게하려면 배열을 Canvas에 RGBA 값으로 쓰고 캔버스에서 base64로 인코딩 된 PNG를 텍스처로 보내야합니다.HTML5 Canvas에서 PNG로 변환하면 알파 투명도 일 때 모든 채널이 0으로됩니다.

알파 값이 0으로 설정 될 때마다 해당 RGB 채널도 PNG로 변환 될 때 0으로 설정됩니다. 구현 세부 사항입니까? HTML5가 아닌 다른 프로그램에서 PNG를 만들려면 (RGBA) 네 쌍둥이 (255,255,255,0)를 사용할 수 있습니까? 알파 값 1을 사용하려고 시도했지만 다른 모든 채널은 그대로 남아 있으므로 미리 곱셈 된 알파의 문제는 아닙니다.

var img = new Image(); 
    var canvasObj = $('<canvas width="1" height="1"></canvas>'); 
    var context = canvasObj[0].getContext('2d'); 
    var imgd = context.getImageData(0,0,1,1); 
    var pix = imgd.data; 
    pix[0]=255; pix[1]=255; pix[2]=255; pix[3]=0; 
    context.putImageData(imgd,0,0); 
    img.src = canvasObj[0].toDataURL("image/png"); 

    context.drawImage(img,0,0); 
    var imgd2 = context.getImageData(0,0,1,1); 
    var pix2 = imgd2.data;

PIX2가 모두 0이 될 것이다 : 여기

이 효과를 재현하는 일부 자바 스크립트 코드입니다.

감사합니다.

출처

2012-07-22 fuzic

이것은 PNG 사양 (http://www.libpng.org/pub/png/spec/1.2/png-1.2-pdg.html)의 일부인 것으로 보입니다.

... 완전히 압축 된 픽셀에는 최상의 압축을 위해 동일한 색 값이 지정되어야합니다.

직접 소스를 찾을 수 없지만이 특정 구현은 모든 채널을 0으로 설정하는 것처럼 보입니다.

출처

2012-07-22 17:02:37 Bill

다른 문제도있었습니다. Canvas에서 PNG를 미리 생성하지 않은 알파로 생성하면 알파를 곱한 다음 알파를 나눕니다 (왜 모르겠는지). – fuzic

@Bill 그들은 무손실 압축이라고 주장합니다! 데이터를 저장할 때 채널을 혼합하는 것은 분명히 손실 압축입니다. – user877329

HTML5 Canvas에서 PNG로 변환하면 알파 투명도 일 때 모든 채널이 0으로됩니다.

답변

관련 문제