HTML5의 이미지에 색을 더하는 방법

Question

이미지를 색칠하고 원점에서 색상을 빼는 대신 추가하고 싶습니다. 자바 스크립트로 HTML5에서이를 수행하는 빠른 방법이 있습니까?

Answer 1

예 간단한 두 가지 방법을 사용할 수 있습니다.

방법 1 - 복합 모드

복합 모드 lighter 현실에 첨가제 모드이다.

당신은 단 한 줄의 코드 (online demo here)를 활성화 할 수 있습니다

ctx.globalCompositeOperation = 'lighter'; 

당신이 절반 이미지를 그린 경우이 결과를 제공 백그라운드에서 무엇에 추가합니다 그려진 다음 일은 세피아 톤 사각형.

방법 2 - 버퍼의 수동 조작은 다른 방법은 몇 가지 단계로 버퍼 자체를 조작하는

입니다

- 이것은 기본적으로 정확한 lighter 모드와 동일하지만, "저를 완료 수준 "방법. 물론

이것은 기초로, 이미지 데이터 (곱하기, 지나치게 노출, 부정, 빼기 회선 등)을 조작하는 당신에게 다른 가능성의 군중을 제공한다 :이 결과

/// get the pixel data for current content 
buffer = ctx.getImageData(0, 0, wh, h); 

/// the color for addition 
c = {r:0, g: 127, b: 200}; 

/// loop through pixel array (RGBA = 4 bytes) 
for(; i < len; i += 4) { 
    data[i]  = data[i]  + c.r; /// add R 
    data[i + 1] = data[i + 1] + c.g; /// add G 
    data[i + 2] = data[i + 2] + c.b; /// add B 
} 

/// we're done, put back the new data to canvas 
ctx.putImageData(buffer, 0, 0); 

:

그리 어렵지 않습니다! 이 배열 버퍼 유형은 캔버스가 사용하는 배열이 Uint8ClampedArray 인 배열이므로이 값을 클램핑 할 필요가 없습니다.

여기는 online demo for this approach입니다. 물론

결론

은 복합 모드는 더 (실제의) 저레벨 수행하고 그에 대한 자바 스크립트를 사용하여 상기 버퍼를 반복보다.

하지만 복합 모드가 지원하지 않는 경우 두 번째 방법을 사용할 수 있습니다 (예 : 어두운 모드가 초기에는 있었지만 이는 사양에서 삭제되었습니다 .xor 모드는 실제 픽셀이 아닌 알파 비트에서만 작동합니다). 앞으로).

또한

- 당신은 당신이 항상 하나 0.5에 색의 알파 값을 설정하여 상단에 다음 모양을 그리거나 경우 어디에서 어떤 다음 무승부 알파 값을 설정 globalAlpha을 사용할 수 없습니다 특히 첨가제 모드 이후 인 경우 이미지 위에 그려진 그림이 있습니다. 이렇게하면 콘텐츠에 색조가 표시되고 번으로 모드가 곱해집니다 (끝에 축소됨).