Canvas Image

Canvas Images

 

• drawImage(img,x,y)
  - 원본 이미지의 원래 크기대로 캔버스의 지정된 위치에 삽입하는 메소드
  - 이미지, 다른 캔버스, 동영상을 삽입할 수 있다.
  - 이미지를 삽입하기 전에 해당 이미지가 로딩되어야 이미지를 삽입할 수 있다.
  

  const canvas43 = document.getElementById('canvas43');
  const ctx43 = canvas43.getContext('2d');
  const img1 = document.getElementById('smile1');
  ctx43.drawImage(img1,50,50);
  
  const canvas44 = document.getElementById('canvas44');
  const ctx44 = canvas44.getContext('2d');
  const img2 = new Image();
  const img3 = new Image();
  const img4 = new Image();
  img2.src='img/smile1.png';
  img3.src='img/smile2.png';
  img4.src='img/smile3.png';
  img4.onload = function(){
      ctx44.drawImage(img2,100,50);
      ctx44.drawImage(img3,250,150);
      ctx44.drawImage(img4,400,250);
  }

• drawImage(img,x,y,width,height)
  - 원본 이미지를 지정한 사이즈로 캔버스의 지정된 위치에 삽입
  - width와 height은 필수 입력이 아니다.
  

  const canvas45 = document.getElementById('canvas45');
  const ctx45 = canvas45.getContext('2d');
  const img5 = new Image();
  img5.src = 'https://ssl.pstatic.net/tveta/libs/1371/1371025/4883850733f210c59815_20220119103334335.jpg'
  const img5w = img5.width;
  const img5h = img5.height;
  img5.onload= function(){
      ctx45.drawImage(img5,(canvas45.width-img5w/3)/2,(canvas45.height-img5h/3)/2,img5w/3,img5h/3);
  }
  
  const canvas46 = document.getElementById('canvas46');
  const ctx46 = canvas46.getContext('2d');
  const w46 = canvas46.width;
  const h46 = canvas46.height;
  const img6 = new Image();
  img6.src="img/flutter_dash.svg";
  const img6w = img6.width;
  const img6h = img6.height;
  img6.onload = function(){
      ctx46.drawImage(img6,(w46-img6w*10)/2,(h46-img6h*10)/2,img6w*10,img6h*10);
  }

• drawImage(img,sx,sy,swidth,sheight,x,y,width,height)
  - 원본 이미지의 위치 sx, sy에 swidth, sheight 크기로 잘라 캔버스의 지정된 위치 x, y에 width, height 크기로 삽입
  - 대상 이미지의 일부분을 crop 해서 가져온다는 개념으로 source 이미지의 일부분을 캔버스 위에 해당하는 크기에 맞춰서 끼워 넣는다.
  

  const canvas47 = document.getElementById('canvas47');
  const ctx47 = canvas47.getContext('2d');
  const img7 = new Image();
  img7.src="img/royal-mile-ge3dbc2ed1_640.jpg"
  img7.onload = function(){
      ctx47.drawImage(img7,400,200,200,200,200,100,190,190);
  }​

• createImageData(width,height or imageData)
  - 모든 픽셀이 투명한 검은색으로 초기화된 빈 ImageData 객체 생성
  - imageData 객체는 픽셀 값을 배열로 반환하며 1개의 픽셀은 4바이트를 차지한다.
  - 1개의 픽셀은 각각 RGBA(255,255,255,255)의 4개 값을 가지고 있다.
  - 100px*100px = 10,000px을 가지고 있는 ImageData 객체는 각 픽셀당 4개의 값을 가지고 있으므로 10,000px*4 = 40,000 개의 값이 필요하다
  - imageData 객체 설정 후 putImageData() 메소드로 지정된 영역에 드로잉 한다.
  - width, height 대신 다른 imageData 객체와 동일한 사이즈를 지정할 수도 있다. (복사 기능은 아니다.)
    ▷ width : ImageData 객체의 가로 값을 반환
    ▷ height : ImageData 객체의 세로 값을 반환
    ▷ data : ImageData 객체 안의 값을 반환
  

  const canvas49 = document.getElementById('canvas49');
  const ctx49 = canvas49.getContext('2d');
  const imgData2 = ctx49.createImageData(100,100);
  
  for(let i=0;i<imgData2.data.length;i+=4){
      imgData2.data[i+0] = 255;
      imgData2.data[i+1] = 0;
      imgData2.data[i+2] = 0;
      imgData2.data[i+3] = 100;
  }
  
  ctx49.putImageData(imgData2,50,50);​

• getImageData(x,y,width,height)
  - 캔버스 내용 전체나 일부 픽셀 정보를 복사한 값을 imageData 객체로 변환하는 메소드
  

  const canvas51 = document.getElementById('canvas51');
  const ctx51 = canvas51.getContext('2d');
  ctx51.fillStyle = 'rgba(255,0,0,.5)';
  ctx51.fillRect(200,50,200,100);
  
  const imgData4 = ctx51.getImageData(100,50,200,100);
  ctx51.putImageData(imgData4,100,200);​

• putImageData(imgData,x,y)
  - imageData 객체를 지정된 영역에 붙여 넣는 메소드
  - 캔버스 좌표(x, y)에 이미지 데이터를 그린다.
  - 이미지 데이터의 크기대로 그린다.
• putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)
  - 이미지 안의 좌표(x, y)에서 영역(w, h)만큼 복사하여 캔버스에 좌표(dirtyX, dirtyY)에 지정한 사이즈(dirtyWidth, dirtyHeight)로 그린다.
  - dirtyX, dirtyY, dirtyWidth, dirtyHeight은 선택 옵션이다.
  

  const canvas53 = document.getElementById('canvas53');
  const ctx53 = canvas53.getContext('2d');
  
  ctx53.fillStyle = 'coral';
  ctx53.fillRect(0,50,200,200);
  
  ctx53.fillStyle = 'cornflowerblue';
  ctx53.fillRect(20,70,160,160);
  
  const imgData6 = ctx53.getImageData(0,50,200,200);
  ctx53.putImageData(imgData6,250,150,50,50,100,100);​

• Path2D 객체
  - Path2D 객체를 사용하여 드로잉 명령을 게시하거나 기록하여 경로를 빠르게 다시 실행시킴으로써 코드를 단순화하고 성능을 향상할 수 있다.
  - 선택적으로 다른 경로를 인자로 받거나 SVG 경로를 문자열로 받아서 객체화할 수도 있다.
  

  const canvas56 = document.getElementById('canvas56');
  const ctx56 = canvas56.getContext('2d');
  const path3 = new Path2D('M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z');
  ctx56.fill(path3);​