Chrome에서 캔버스 픽셀 내용을 복사 할 때 예기치 않은 결과가 발생하는 이유는 무엇입니까?

Question

캔버스 '알파 픽셀'을 일부 배열 (Tarray)에 복사 중입니다. 나는 오페라와 크롬이 그것을 다르게한다는 것을 알았다. 테스트를 위해 어떤 범위 (65,100)의 값을 버퍼링하고 '경고'했습니다.

:

이유 :

이는 크롬 결과

this.Tarray = null; 
..... 
create: function (e) { 
    .......... 
    var test = ''; 
    var ctx = this.canvas.getContext('2d'); 
    var pixels = ctx.getImageData(0, 0, this.canvas.width, this.canvas.height).data; 
    this.Tarray = new Array(pixels.length/4); 

    for (var i = 0; i < pixels.length; i += 4) { 
     this.Tarray[i/4] = pixels[i + 3]; 
     // here we buffer some range of values 
     if (i/4 < 100 && i/4 > 65) 
      test += (',' + pixels[i + 3]); 
    } 
    alert(test) 
    ........... 
} 
...... 

이 오페라의 결과인가? 여기

EDIT

은 (영상이 알파 값을 증가) transperancy 효과를 생성 코드 :

transperancyEffect: function() { 

    // when menu first draws (but not displays) it has native alpha value 
    //so we must change it before first display 
    this.changeTransperancy(0, 0, this.canvas.width, this.canvas.height, this.canvas, 2); 
    document.body.appendChild(this.canvas); 
    var N = 20; 

    var delay = Math.round(this.buildInfo.time/N); 

    var self = this; 


    function wrapper() { 
     arguments.callee.myStaticVar = arguments.callee.myStaticVar || 0; 
     arguments.callee.myStaticVar++; 
     var ctx = self.canvas.getContext('2d'); 
     var imageData = ctx.getImageData(0, 0, self.canvas.width, self.canvas.height); 
     // self.changeTransperancy(0, 0, self.canvas.width, self.canvas.height, self.canvas, (arguments.callee.myStaticVar * 200/N + 4)); 
     var pixels = imageData.data; 

     for (var i = 0; i < pixels.length; i += 4) { 
      pixels[i + 3] = self.Tarray[i/4]; // Math.round((self.Tarray[i/4] * arguments.callee.myStaticVar)/ N); 
     } 
     ctx.clearRect(0, 0, self.canvas.width, self.canvas.height); 

     ctx.putImageData(imageData, 0, 0); 

    } 

    function callback() { 
     self.registerListeners(); 
    } 

    this.repeat(wrapper, delay, N, callback); 
} 

changeTransperancy을 - 알파 값 -이 기능은 correctly.last parametr 작품.

반복 - setInterval을 기반으로하지만 호출 (N) 및 콜백 함수의 수를 지정할 수 있습니다.

이 기능은 아무것도 변경하지 않아야합니다 (pixels [i + 3] = self.Tarray [i/4] - 같은 알파 값). 오페라에서는 모두 OK입니다. 크롬에서는 - 제대로 보이지 않습니다. 길에 다른 브라우저가 안티 앨리어싱을 처리 때문에 알파 값

Answer 1

차이는 보통.

당신이 다른 브라우저 벤더는 다른 알파 값을 가져되어있어 직접 픽셀 조작을 통해 이미지를 그리기하지 않는 한.

createImageData/putImageData을 사용하여 캔버스를 그릴 경우, 다른 알파 값을 볼 수는 없지만 fillRect/strokeRect과 같은 다른 상위 레벨 함수를 사용하면 알파 (때로는 심지어 RGB) 불일치가 나타납니다.