Opera에서 캔버스 픽셀 조작의 버그

Question

저는 HTML5를 배우고 있으며 캔버스 픽셀 조작과 같은 기본적인 작업을 수행 할 때 색상 채널을 변경하려고 할 때 오페라가 이미지를 완전히 엉망으로 만듭니다. http://gda.0fees.net/tests/opera/canvas2.html (NB : "예상 결과"이미지가 동적으로로드되고 서버가 느린 경우) 자체 테스트해야하는 작은 테스트 페이지를 작성했습니다.

스크립트는 이미지를 가져 와서 모든 픽셀에 대해 빨간색 값을 동일한 방식으로 변경합니다. 여기에 (위의 링크를 통해 전체에서 볼 수있는) 내 코드의 중앙 지점입니다 : 크롬, 파이어 폭스, IE 9에서

for (var i = 0, l = matrix.data.length; i < l; i += 4) 
{ 
    matrix.data[i] += delta; 
    if (matrix.data[i] > 255) matrix.data[i] = 255; 
    if (matrix.data[i] < 0 ) matrix.data[i] = 0; 
} 

, 그리고 사파리는 그것이 마치 마법처럼 작동합니다. 그러나 Opera에서 두 변환 모두에 대해 다음 결과를 얻었습니다. http://gda.0fees.net/tests/opera/opera.jpg

잘못된 것이 있습니까? 이것은 알려진 버그입니까? 억제 될 수 있습니까?

Answer 1

나는 빨간 채널 값이 잘못된 값으로 바뀌 었다고 추측해야했다. 도청 된 영역은 적절하게 다루어지는 영역보다 전체적으로 훨씬 밝습니다 (원본 이미지에서).

원래의 빨간색 값 + 128이 색상 구성 요소를 나타내는 데 사용 된 최대 값을 초과하는 픽셀의 빨간색 값을 0으로 설정하는 일종의 제한 검사를 수행하는 것일 수 있습니다 (uint 8은 아마도?).

이전에 HTML5의 캔버스를 사용 해본 적이 없지만 각 픽셀의 색상을 샘플링 할 수 있다면 최대 값을 추측하고이를 극대화 할 때이를 초과하지 않도록 확인하여이를 억제 할 수 있습니다. 특정 픽셀의 색상 구성 요소.

이 을 시도

// Apologies, my JavaScript is very rusty, and this isn't how I would do this. 
for (var i = 0, l = matrix.data.length; i < l; i += 4) 
{ 
    var current_red = matrix.data[i]; 
    var new_red = 0; 

    if((current_red + delta) > 255) new_red = 255; 
    else if((current_red - delta) < 0) new_red = 0; 
    else new_red = current_red + delta; 
} 

// What I would do is this: 
for (var i = 0, l = matrix.data.length; i< l; i+=4) 
{ 
    // I don't know if JS has a clamp function :D 
    matrix.data[i] = clamp(matrix.data[i] + delta, 0, 255); 
}