drawImage를 사용하여 모든 그림의 크기를 동일한 너비로 조정하십시오.

Question

Im 이미지를 "크기를 조정하려면"drawImage를 사용합니다. 이 같은 사용마다

img.onload = function(){ 
      var width = img.width * 0.16, 
       height = img.height * 0.16; 

      canvas.width = width, 
      canvas.height = height; 


      ctx.imageSmoothingEnabled = false; 

      ctx.drawImage(img, 0, 0, width, height); 
     } 

는, 이미지 좋게

를 도시하지만 폭과 높이를 고정 할 때마다 그것이 초기화 약간 흐린 img.onload = 함수() {

  ctx.imageSmoothingEnabled = false; 

      ctx.drawImage(img, 0, 0, 56, 56); 
     } 

를 도시

고정 된 높이와 너비가 필요하지만 흐리게 보이지 않아야합니다.

Answer 1

첫 번째 버전은 캔버스의 너비와 높이를 동일한 치수로 설정합니다. a 이미지의 이미지이므로 이미지를 그릴 때 크기 조정이 수행되지 않습니다 (실제로 img의 너비와 높이는 지정한 값과 일치하도록 16 % 또는 0.16으로 축소되지만 이미지의 크기는 줄이지 ​​않습니다). 캔버스에 드로잉 할 때 drawImage()의 마지막 두 개의 인수가 캔버스의 크기와 일치하므로).

반면

img.onload = function(){ 
      var width = img.width * 0.16, 
       height = img.height * 0.16; 

      canvas.width = width, // canvas's width === img's width 
      canvas.height = height; // canvas's heeight === img's height 


      ctx.imageSmoothingEnabled = false; 

      ctx.drawImage(img, 0, 0, width, height); // draw img at the same dimensions as those of the canvas => no scaling => no blur 
     } 

이, 두 번째 버전은 56x56 크기로 이미지를 그립니다이 캔버스 '치수, 따라서 이미지가 축소되고 일치하지 않는, 그래서 약간 흐릿하게 나타납니다.

img.onload = function(){ 

     ctx.imageSmoothingEnabled = false; 

     ctx.drawImage(img, 0, 0, 56, 56); // last 2 arguments tell the browser to draw the image at 56x56 px dimensions 
    }