투명 배경을 변경하지 않고 이미지 색상을 변환하십시오.

Question

HTML5 또는 Canvas (또는 다른 HTML5 기술)를 사용하여 투명하지 않은 영역의 색상을 변경하는 좋은 방법이 있습니까?

나는 많은 인터넷 검색 및 이미지, 등의 색상을 변경할 수 있습니다 (캔버스) 일부 솔루션,

Canvas - Change colors of an image using HTML5/CSS/JS?

How do i tint an image with HTML5 Canvas? 그러나이 솔루션은 또한에 투명 배경을 변경 발견 주어진 색깔 (나는 원하지 않는다).

그것의 배경이 투명한 이미지를 PNG로 유래. 이제 투명 픽셀 (배경)에 영향을주지 않고 이미지 색상을 변경하여 새로운 색상으로 캔버스 toDataURL 메소드를 사용하여 이미지를 다시 저장할 수있게되었습니다.

HTML5가 있는지 여부는 확실하지 않습니다. 어떤 도움을 주셔서 감사합니다.

미리 감사드립니다. 편집을 할

******************* *********************

추가 Pill (capsule)의 새로운 이미지.

Answer 1

데모 (이하이 데모에 대한주의 사항 참조) : 당신은 이미지의 RGBA 픽셀 데이터를 포함하는 배열을 얻을 수 http://jsfiddle.net/m1erickson/2d7ZN/

사용 context.getImageData

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

var data=imageData.data; 

거기에서 각 픽셀의 색을 읽고 선택적으로 변경할 수 있습니다.

는 RGBA 어레이가 다음과 같이 배치되어

// top-left pixel (x:0,y:0) 

data[0] red of pixel#0 (0-255) 
data[1] green of pixel#0 (0-255) 
data[2] blue of pixel#0 (0-255) 
data[3] alpha of pixel#0 (opacity: 0-255) 

// next pixel (x:1,y:0) 

data[4] red of pixel#1 
data[5] green of pixel#1 
data[6] blue of pixel#1 
data[7] alpha of pixel#1 

당신은 R, G, B 또는 데이터 배열 예

변화에 의한 화소의 구성을 변경할 수 있으며, 이러한 변경 투명성에 대해 빨간색으로

data[0]=255; // red 
data[1]=0;  // green 
data[2]=0;  // blue 
data[3]=255; // alpha (opacity) 

의 왼쪽 상단 픽셀 :

각 픽셀의 알파 구성 요소가 픽셀의 투명도를 결정합니다.당신은 단지 대부분 불투명 픽셀을 수정하려는 경우, 당신은 쉽게이 같은 모든 반투명 픽셀 무시할 수 있습니다 : 당신과 함께 캔버스에 다시 수정 된 픽셀을 밀어 수, 마지막으로

// alpha is 0-255 
// ignore pixels with alpha < 200 (ignore all pixels that are mostly semi-transparent) 

if(data[3]<200) { // don't process this pixel } 

을 .putImageData

context.putImageData(imageData,0,0); 

데모에 대한

참고

은 캔버스의 기본 RGBA 색 구성표를 사용하여 이미지 "칠"하기는 어렵습니다.

그래서이 데모는 RGB 데이터를 HSL 색 구성표로 변환합니다. 이렇게하면 픽셀의 다른 구성 요소 (S = 색상의 채도, L = 색상의 밝기)에 영향을 미치지 않고 "색상"(색조)을 변경할 수 있습니다.

픽셀이 다시 채워지면 수정 된 HSL 데이터가 다시 RGBA로 변환되어 데이터 배열에 저장됩니다.