[javascript] createImageBitmap() 함수 대체법

관련지식
javascript, canvas, createImageBitmap

이미지 태그를 캔버스에 그리고 싶을땐 drawImage() 함수를 사용하면 됩니다. 그러나 이미지의 일부만 캔버스에 추가하고 싶을때는 createImageBitmap() 함수로 일부 영역만 비트맵으로 추출하여 캔버스에 그려야 합니다.

캔버스에 이미 그려진 영역 일부를 캔버스에 추가하고 싶을때는 getImageData() 함수를 이용할수 있는데 이것은 ImageData 객체로 raw 데이터가 아닙니다. 따라서 createImageBitmap()함수를 이용하여 raw 데이터 변환 후 drawImage() 함수를 사용할 수 있습니다.

그런데 createImageBitmap() 함수는 현재 기준으로 윈도우10의 Edge 브라우저도 지원을 하지 않는 호환성 최악의 함수 입니다. 따라서 이 함수를 대신해서 사용할 방법이 필요합니다.

https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap

위 링크에는 특정 이미지의 일부분을 캔버스에 보이도록 하는 예제가 있습니다. 임시 캔버스를 이용하면 createImageBitmap() 함수를 사용하지 않고 동일한 기능을 할 수 이습니다. 사용된 임시 캔버스는 display:none 시키면 겉으로 티나지 않습니다.

예제 원본)

var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
image = new Image();
// Wait for the sprite sheet to load
image.onload = function() {
  Promise.all([
    // Cut out two sprites from the sprite sheet
    createImageBitmap(image, 0, 0, 32, 32),
    createImageBitmap(image, 32, 0, 32, 32)
  ]).then(function(sprites) {
    // Draw each sprite onto the canvas
    ctx.drawImage(sprites[0], 0, 0);
    ctx.drawImage(sprites[1], 32, 32);
  });
}
// Load the sprite sheet from an image file
image.src = 'sprites.png';

임시 캔버스 사용)

var tmpCanvas = document.getElementById("tmpCanvas");
var tmpCtx = tmpCanvas.getContext("2d");
var canvas = document.getElementById('myCanvas'),
ctx = canvas.getContext('2d'),
image = new Image();
// Wait for the sprite sheet to load
image.onload = function() {
  tmpCtx.drawImage(image, 0, 0);  //임시 캔버스에 이미지 원본 그림
  var image1 = tmpCtx.getImageData(0, 0, 32, 32);  //이미지 일부 추출
  var image2 = tmpCtx.getImageData(32, 0, 32, 32);  //이미지 일부 추출
  tmpCtx.clearRect(0, 0, image.width, image.height);  //캔버스 비움
  tmpCtx.putImageData(image1, 0, 0);  //추출했던 이미지 추가
  ctx.drawImage(tmpCanvas, 0, 0);  //캔버스 내용을 그대로 그리기
  tmpCtx.putImageData(image2, 0, 0);  //추출했던 이미지 추가
  ctx.drawImage(tmpCanvas, 32, 32);  //캔버스 내용을 그대로 그리기
}
// Load the sprite sheet from an image file
image.src = 'sprites.png';