HTML5 - 이미지 크기 감지, 캔버스 크기 조정

Question

최근에 Catifier.com을 만들고 호스팅했습니다.

저장하는 데 버그가 있다는 점을 제외하고는 매우 효과적입니다. 배경으로 설정하면 이미지가 늘어납니다.

초상 이미지가 끔찍한 것처럼 보입니다.

사용자가 상자에 붙여 넣은 이미지의 너비와 높이를 감지 한 다음 그에 따라 캔버스의 크기를 조정할 수 있습니까?

Answer 1

크기를 알기 위해 DOM 요소에 그림을로드해야합니다.

• 이 보이지 않는 DOM 요소에 사진을 추가

  그래서 basicly 당신이 그것을하고 싶은 경우에, 여기 단계입니다.

• onload 이벤트가 발생하면 그림 너비와 높이를 얻을 수 있습니다.
• 그런 다음 두 변수에 따라 캔버스를 만듭니다.

거의 모든 자바 스크립트 행에서 수행 할 수 있습니다.

Answer 2

아이디어를 더 많이 제공하기 위해이 작업을 빠르게 수행 할 수있는 매우 일반적인 기능 일 가능성이 높습니다.

var img = document.getElementByTagName('img'); 
for (var i = 0; i < img.length; i++) { 
    var width = img[i].width, 
     height = img[i].height; 

    // do some stuff with the img[i] width and height here if you like. for each image on the page... 
} 

실제로 어떻게 끝나지는 않지만 img.width 또는 height만큼 간단합니다. 그게 더 많은 도움이된다면.