drawImage를 사용하여 트리밍 할 때의주의

HTML5 Canvas api에는 drawImage가 있다.

그 이름대로 Canvas에 이미지를 그리는 방법이다.

기본적인 사용법은 다음과 같습니다.

예) 100x100 이미지 그리기

var canvas = document.getElemntById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "hoge.jpg";
img.onload = function() {
  ctx.drawImage(img, 0, 0, 100, 100);
}

또 트리밍도 인수를 아래와 같이 건네주는 것으로 간단하게 할 수 있다.

예) 100x100의 이미지를 x=10, y=10의 지점에서 50x50의 크기로 트리밍하여 그리기

var canvas = document.getElemntById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "hoge.jpg";
img.onload = function() {
  ctx.drawImage(img, 10, 10, 50, 50, 0, 0, 50, 50);
}

그럼, x=-10, y=-10의 지점으로부터 50x50의 사이즈로 트리밍해 묘화 해 보면 어떻게 될까.

var canvas = document.getElemntById('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = "hoge.jpg";
img.onload = function() {
  ctx.drawImage(img, -10, -10, 70, 70, 0, 0, 70, 70);
}

Chrome



FireFox



Safari



이렇게 Safari만 표시되지 않는다.

이것은 무엇인가라고 하면, HTML5의 사양에서는 이와 같이 정의되고 있다.

소스 rectangle is the rectangle whose corners are the four points (sx, sy), (sx+sw, sy), (sx+sw, sy+sh), (sx, sy+sh).
If the source rectangle is not entirely within the source image, or if one of the sw or sh arguments is zero, the implementation must raise an INDEX_SIZE_ERR exception.

htps //w w. w3. rg/TR/2010/WD-2d 이렇게 xt-20100624

즉, 트리밍할 때의 직사각형의 모퉁이는 원 화상내로부터 돌려선 안 된다고 하는 것.

라는 것은, x=-10, y=-10을 drawImage로 설정하면 에러가 되어 draw 할 수 없는 것은 사양대로가 된다.

그래서 이번의 경우, Safari의 거동이 바르고, 그 외의 브라우저의 거동 쪽이 오히려 독자 사양이라고 하는 것 같다.

만약 Safari(mobile도 포함한다)를 대상 브라우저로 하고 있고, 아래와 같은 트리밍 기능을 구현하는 경우는, 트리밍의 테두리보다 원래 화상이 작아지지 않도록 제한할 필요가 있으므로 주의가 필요하다.