루프에서 이미지를 호출하면 겹치는 변수가 생성됩니다.

Question

페이지가로드 될 때 페이지의 각 이미지에 함수를 적용하려고합니다. 내 image.onload 함수 내의 변수는 이미지가 건너 뛰고 예기치 않은 효과 (예 : width 적용되지 않는 이미지)가 발생하는 전역 변수로 보입니다. 여기

var imgList = document.getElementsByTagName('img'); 
$('img').after('<canvas></canvas>'); 

for (var j = 0; j < imgList.length; j++){ 
    var image = document.getElementsByTagName('img')[j]; 
    var canvas = document.getElementsByTagName('canvas')[j]; 

    image.onload = function(){ 
     console.log(canvas); 
     var ctx = canvas.getContext('2d'); 

     canvas.width = image.width; 
     canvas.height = image.height; 

     ctx.drawImage(image, 0, 0, canvas.width, canvas.height); 
     var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); 
     var pixelNum = imgData.data.length; 

     //initialize brightness for levels 
     var redMax = 0; 
     var redMin = 255; 
     var greenMax = 0; 
     var greenMin = 255; 
     var blueMax = 0; 
     var blueMin = 255; 

     for(var i = 0; i < pixelNum; i += 4){ 
      //set min and max values for each color 
      if (imgData.data[i] > redMax) { redMax = imgData.data[i] }; 
      if (imgData.data[i] < redMin) { redMin = imgData.data[i] }; 
      if (imgData.data[i+1] > greenMax) { greenMax = imgData.data[i+1] }; 
      if (imgData.data[i+1] < greenMin) { greenMin = imgData.data[i+1] }; 
      if (imgData.data[i+2] > blueMax) { blueMax = imgData.data[i+2] }; 
      if (imgData.data[i+2] < blueMin) { blueMin = imgData.data[i+2] }; 
     } 
     console.log(redMin+" "+redMax+" "+blueMin+" "+blueMax+" "+greenMin+" "+greenMax); 

     for(var i = 0; i < pixelNum; i += 4){ 
      //map colors to 0 - 255 range 
      imgData.data[i] = (imgData.data[i] - redMin) * (255/(redMax - redMin)); 
      imgData.data[i+1] = (imgData.data[i+1] - greenMin) * (255/(greenMax - greenMin)); 
      imgData.data[i+2] = (imgData.data[i+2] - blueMin) * (255/(blueMax - blueMin)); 
     } 
     ctx.putImageData(imgData, 0, 0); 

     //remove original img tag 
     $(image).remove(); 
     console.log(image); 

    }; 
}; 

(아래 해설) 내 콘솔 출력은 다음과 같습니다 : 예상대로

<canvas> (line 20) 
0 0 0 0 0 0 (line 47) 
<img src="images/cimg1836.jpg"> (line 59) 

<canvas width="400" height="268"> (line 20) 
29 255 18 255 23 255 (line 47) 
<img src="images/cimg1836.jpg"> (line 59) 

-canvas 태그가 추가됩니다

여기에 내 모든 JS입니다. - min이 255로 설정되고 max가 0 (이미지가 완전히 검은 색 픽셀로 읽혀지기 때문에)의 밝기 최대 및 최소가 모두 0이 아니어야합니다. - 나열된 이미지는 마크 업에 포함 된 두 개의 이미지 중 두 번째 이미지입니다.

- 첫 번째 캔버스 태그가 콘솔에 출력 중임 - 두 번째 캔버스는 img에서 상속 된 img{ width:400px; } 스타일을 무시합니다. - 예상대로 - 예상대로

어떻게 이미지를 구별 할 수 있습니까? 즉, 모든 코드가 한 번만 실행되도록하려면 어떻게해야합니까?

Answer 1

JavaScript에는 블록 범위가 없으므로 루프의 변수는 실제로 "전역"입니다.

저는 루프 몸체 전체를 인수로 j을 취하는 함수로 옮깁니다. 이렇게하면 image과 canvas은 각 개별 함수 호출의 범위에 고유하므로 "겹치지"않고 사용자가 보았던 효과를 유발합니다.

function doMyThing(image_n) { 
    var image = document.getElementsByTagName('img')[image_n]; 
    var canvas = document.getElementsByTagName('canvas')[image_n]; 

    image.onload = function() { /* ... */ }; 
} 

for (var j = 0; j < imgList.length; j++) { 
    doMyThing(j); 
} 

같은 해킹 (즉, 당신이 반드시 그들을 직관적으로하지 않을 기능의 범위를 도입한다)에 대한 필요성은 자바 스크립트의 특색이며, 당신은 당신이 프로그램을 지속적으로 당신의 마음의 뒤쪽에 보관한다고 이 언어로.