javascript - HTML5キャンバスで画像をタイルに分割する

Question

html5 キャンバスを使用して 10x10 のタイル画像に分割したい大きな画像があります。大きな画像をキャンバスに簡単に描画し、getImageData を使用して特定の領域のピクセル データを取得できます。

その画像データ (ピクセル配列) を画像 html 要素に配置する簡単な方法はありますか、または新しいキャンバスを作成し、ピクセル配列に ImageData を配置してから 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;
}