자바 스크립트를 사용하여 캔버스에 축소판 이미지 만들기

Question

방금 ​​자바 스크립트로 시작했고 이미지 검색 갤러리를 코딩하려고합니다. xml 데이터베이스 파일로 이미지 원본을 가져옵니다.

는 내가 루프에 대한 이미지의 소스 물마루 들어가 있고, 그때 캔버스에 각각의 이미지를 그립니다. 하지만 내가하고 싶은 것은 다른 창에서 실제 크기의 이미지를 보여주고 싶은 이미지를 클릭 할 때입니다.

은 어떻게 (바람직하게는 단지 자바 스크립트를 사용하여) 그렇게합니까? Heres는

코드의 부분 : 사전에

//goes trough the xml database searching for the image 
for (var p = 0 ; p < xmlDoc.firstChild.childNodes.length ; p ++) 
         { 
          if (xmlDoc.firstChild.childNodes[p].nodeName == 'path') 
          { 

           document.getElementById("results_ID").innerHTML += xmlDoc.firstChild.childNodes[p].textContent+"<br />"; 

           var src = xmlDoc.firstChild.childNodes[p].textContent; 

           //fill the array with the images 
           arrImg.push(src); 

          } 
         } 
        } 
       } 
      } 
     } 
     //resize and draw the images founded 
     resizeCanvas(arrImg.length); 
     for(var i = 0; i < arrImg.length; i++) 
     { 
      drawImg(arrImg[i]); 

     } 
    } 
    //function do draw the images  
    function drawImg(src) 
    { 
     var img = new Image(); 
     img.onload = function() 
     { 

      if (x > ctx.canvas.width) 
      { 
       y = y + 310; 
       x = 0; 
      } 

      img.width = 300; 
      img.height = 300; 

      ctx.drawImage(img, x, y, img.width, img.height); //(0,0) 
      x = x + 310; 
     }; 
     img.src = src; 
    } 

    //function to resize the canvas by the number of images found 
    function resizeCanvas(nImages) 
    { 
     var height = (nImages/4); 
     ctx.canvas.height = Math.round(height) * 310; 
     alert(ctx.canvas.height); 
    }; 

감사합니다.

Answer 1

캔버스 수동적이며 기본적으로 이미지 축소판의 트랙과 어디를 그린을 유지해야합니다 거기에 그려지는 것을 모르는 것처럼.

이 캔버스에 클릭을 할 때 이미지의 지역을 확인 할 수 있습니다 다음 이미지를 클릭하고 표시 할 수 있습니다.

업데이트 : 예를 들어 ONLINE DEMO HERE

은 - 이미지를 계속 추적하기 :

var imageRegions = []; /// new array that holds the image regions 

for(i; i < count; i++) { 

    /// load image and get its position and dimension on canvas 
    ctx.drawImage(img, x, y, img.width, img.height); //(0,0) 
    x = x + 310; 

    /// store the region: 
    imageRegions.push({image: img, 
         x:x, y:y, width:img.width, height:img.height}); 

} 

을 이제 하나를 좌표를 찾기 위해이 지역으로 배열을 확인할 수 있습니다 캔버스를 클릭하면 내에 그 이미지 제공 :

canvas.onclick = function(e) { 

    /// adjust coordinates to be relative to canvas 
    var rect = canvas.getBoundingClientRect(), 
     x = e.clientX - rect.left, 
     y = e.clientY - rect.top, 
     i = 0, r; 

    for(; r = imageRegions[i]; i++) { 

     /// got a winner? 
     if (x > r.x && x < r.x + r.width && 
      y > r.y && y < r.y + r.height) { 

      presentImage(r.image); /// dummy function, present image 
      return; 
     } 
    } 
}