HTML5 캔버스로 이미지를 타일로 자르다

Question

나는 html5 캔버스를 사용하여 10x10 타일 이미지로 나누고 싶은 커다란 이미지를 가지고있다. 큰 이미지를 캔버스에 쉽게 그릴 수 있으며 getImageData를 사용하여 특정 영역의 픽셀 데이터를 가져올 수 있습니다.

이미지 html 요소에 해당 이미지 데이터 (픽셀 배열)를 넣는 쉬운 방법이 있습니까? 아니면 새 캔버스를 만들고 putImageData를 픽셀 배열로 만든 다음 toDataURL을 호출해야합니까?

Answer 1

왜 그 모든 문제를 캔버스로 처리할까요? 이미지를 배경으로 사용하고 위치를 지정하여 원하는 부분을 표시하십시오.

HTML

<div class="myImage section1"></div> 
<div class="myImage section2"></div> 
<div class="myImage section3"></div> 
<div class="myImage section4"></div> 

CSS

div.myImage { 
    width: 100px; 
    height: 100px; 
    background-image:url('myImage.png'); 
    background-position: 0 0; 
} 

.section2 { 
    background-position: 100px 0; 
} 

.section3 { 
    background-position: 0 100px; 
} 

.section4 { 
    background-position: 100px 100px; 
}