putImageData alpha lost

Question

투명한 배경으로 png 파일의 색상을 변경하는 데 많은 시간을 할애합니다. getImageData (ctx, 0,0,100,100) .data에서 색상을 설정하는 방법을 알고 있습니다. 하지만 난

내가있어 ... 난 흰색 배경을 가지고 같은 새로운 PNG 이미지를 저장하고자 할 때 :

var el = document.getElementById('before'); 
    var ctx = el.getContext('2d'); 
    var img=new Image(); 
img.src='src'; 
    ctx.drawImage(img,0,0,150,150); 
    var imgData=ctx.getImageData(0, 0, 150, 150); 
    for (var i=0;i<imgData.data.length;i+=4){ 
     imgData.data[i]=135; 
     imgData.data[i+1]=222; 
     imgData.data[i+2]=115; 
    } 
    var es = document.getElementById('after'); 
    var cts = es.getContext('2d'); 
    cts.putImageData(imgData,0,0); 

EXAMPLE 이 (내가 그것을 여기 putImageData 이유를 잘 모릅니다)을

다른 프로젝트에서

(예 : https://crosspop.in/croquis) 가능하지만 해결 방법을 찾을 수 없습니다.

투명한 배경으로 modyfited getImageData에서 캔버스를 만드는 방법을 알고 있습니까?

관련

Answer 1

귀하의 문제는 알파와 아무 상관이있다 : 이상한 (이미지의 모든 픽셀, 심지어는 투명 하나를 변경하는) 동안 알고리즘은 잘 작동합니다.
하지만 초보자가 실수로 콘솔을 보지 못했다면 교차 원산지 문제 (CORS)로 인해 이미지 데이터에 액세스 할 수 없다는 것을 알았을 것입니다.
는 이미지에 대한 Base64로 문자열을 사용하도록 나는 당신의 바이올린을 수정하고 그것을 잘 작동합니다 :

http://jsfiddle.net/gamealchemist/6aZ7L/3/

var data = imgData.data; 
for (var i = 0; i < data.length; i += 4) { 
    if (data[i + 3]) { 
     data[i] = 135; 
     data[i + 1] = 222; 
     data[i + 2] = 115; 
    } 
} 

하지만 사실 하나를 것을, 다시 착색 이미지의 더 나은 방법이있다) imageData 사용을 피합니다. 2) 더 빠르고 3) CORS 문제가 없습니다. globalcompositeOperation 문맥을 사용합니다. 예를 들어 캔버스를 녹색으로 채운 다음 목적지 입력을 사용할 수 있습니다. 각 녹색 픽셀 복사 된 이미지의 픽셀이 투명하지 않은 경우에만 유지됩니다.

function taintIt() { 
    var es = document.getElementById('after'); 
    var cts = es.getContext('2d'); 
    cts.save(); 
    cts.fillStyle = 'rgb(135,222,115)'; 
    cts.fillRect(0, 0, 150, 150); 
    cts.globalCompositeOperation = 'destination-in'; 
    cts.drawImage(img, 0, 0, 150, 150); 
    cts.restore(); 
} 

http://jsfiddle.net/gamealchemist/6aZ7L/4/은 (-admittedly 방법 내가 패턴을 그리는 시도 topic- 중 약간함으로써, 매우 재미 : http://jsfiddle.net/gamealchemist/6aZ7L/6/embedded/result/)

Answer 2

내가 추가

cts.fillStyle = "red"; 
    cts.fillRect(0, 0, 120, 120); 

juste before :

당신의 exemple에서

210 : http://jsfiddle.net/gamealchemist/6aZ7L/3/ putImageData 알파를 무시하고 여전히 흰색 backound를 인쇄 ...