픽셀 조작을 사용하여 캔버스를 수정하는 것은 IE9에서 완전히 작동하지 않습니다.

Question

HTML5 캔버스에서 일부 픽셀 조작을 수행하려는 첫 번째 시도에서 백그라운드 이미지의 특정 부분을 변경하는 코드를 작성했습니다. 변경해야 할 특정 부분을 표시하기 위해 마스크 이미지를 사용하고 있습니다. 그리고 저는 한 번에 2 개의 수직선을 1 픽셀 씩 그립니다. 내 코드는 다음과 같습니다.

var backgroundTemp=[0,0,false]; 

function generateBg(){ 
    var bgGenCanvas = document.getElementById("backgroundGenerator"); 
    var bgGenCtx = bgGenCanvas.getContext("2d"); 

    var bgMaskCanvas = document.getElementById("backgroundMask"); 
    var bgMaskCtx = bgMaskCanvas.getContext("2d"); 

    if(backgroundTemp[0]==0){ 
     var img = new Image(); 
     img.onload=function(){ 
      bgGenCtx.drawImage(this,0,0); 
      backgroundTemp[0]++; 
      generateBg(); 
     } 
     backgroundTemp[0]++; 
     img.src = 'images/ordnerGreen.png'; 
    } 
    if(backgroundTemp[1]==0){ 
     var img = new Image(); 
     img.onload=function(){ 
      bgMaskCtx.drawImage(this,0,0); 
      backgroundTemp[1]++; 
      generateBg(); 
     } 
     backgroundTemp[1]++; 
     img.src = 'images/ordnerMask.png'; 
    } 
    if(backgroundTemp[0]==2 && backgroundTemp[1]==2 && backgroundTemp[2]==false){ 
     backgroundTemp[2]=true; 
     var newColor=hexToRgb(settings.ordnerColor); 
     var genData = bgGenCtx.getImageData(0,0,bgGenCanvas.width,bgGenCanvas.height); 
     var maskData = bgMaskCtx.getImageData(0,0,bgMaskCanvas.width,bgMaskCanvas.height); 
     var darkenAt1=796*4; 
     var darkenAt2=996*4; 
     var widthPerLine=bgGenCanvas.width*4; 
     for(var i=0;i<maskData.data.length;i+=4){ 
      var currentLine=Math.ceil(i/widthPerLine); 

      var red=maskData.data[i]; 
      var green=maskData.data[i+1]; 
      var blue=maskData.data[i+2]; 

      if(red==255 && green==255 && blue==255){ 
       red=newColor.r; 
       green=newColor.g; 
       blue=newColor.b; 
       if(darkenAt1==i || darkenAt2==i){ 
        red-=Math.floor(red/4); 
        green-=Math.floor(green/4); 
        blue-=Math.floor(blue/4); 
        if(darkenAt1==i){ 
         darkenAt1+=parseInt(widthPerLine); 
        } 
        if(darkenAt2==i){ 
         darkenAt2+=parseInt(widthPerLine); 
        } 
       } 
       genData.data[i]=red; 
       genData.data[i+1]=green; 
       genData.data[i+2]=blue; 
      } 
     } 
     bgGenCtx.putImageData(genData,0,0); 
     document.getElementById('viewerBackground').style.backgroundImage="url('"+bgGenCanvas.toDataURL()+"')"; 
    } 
} 

$(window).load(function(){generateBg();}); 

처음에는 임의로 작동했거나 작동하지 않았습니다. 때로는 결과물이 비어있을 때가 있으며 때로는 원본 이미지와 때로는 수정 된 이미지가 있습니다. 이미지로드가 완료되지 않았을 것으로 생각하여 둘 다로드 될 수 있도록 구조를 추가했습니다. 이것은 Firefox와 Chrome에서 효과가있었습니다. IE에서 그러나 문제는 여전히 거기에, 나는 F5를 누르면 매번 임의의 결과를 얻을 때마다.

누구든지이 문제를 해결하는 방법을 알고 있습니다.

Answer 1

이미지 로딩 속도 (및 캐시에서의 가용성)에 따라 한 번만 실행하는 대신 픽셀 반복을 3 번 실행할 수 있습니다. (

당신이 당신의 이미지를 순차적으로로드하려고한다이를 방지하려면 (이미지가 캐시에 사용할 수있는 경우) 최악의 경우,

당신의 onLoad 리스너 이미지의 SRC 즉시 실행됩니다

은 지정 즉, backgroundTemp [1] onLoad 함수에서 backgroundTemp [1] 이미지를로드하고 backgroundTemp [1] onLoad에서 픽셀 반복 항목을 시작합니다.