javascript - キャンバスを使用して画像をdiv要素にスライスしますか？

Question

画像を読み込んでから、キャンバスを使用して個々の正方形に切り抜きます。トリミングされた選択範囲（キャンバスに描画される）を個々のdiv要素に割り当てるにはどうすればよいですか？複数のキャンバスを作成して複数のdiv内に挿入できることは理解していますが、パフォーマンスが低下します。キャンバスを取得して画像オブジェクトなどに変換する方法はありますか？

Answer 1

canvas.toDataURL()キャンバスの画像を自分の画像として設定するbackground-imageために使用しようとしました<div>か？

それが機能する場合は、キャンバスの画像をCSSスプライトとして使用できるはずです。

Answer 2

キャンバスも必要ありません。画像をdiv要素の背景として使用し、背景位置を使用して画像のさまざまな部分を表示します。

例：

<div id="nw"></div>
<div id="ne"></div>
<div id="sw"></div>
<div id="se"></div>

CSS：

div {
  width: 100px;
  height: 100px;
  background-image: url(someimage.jpg);
  overflow: hidden;
}
#nw { background-position: 0 0; }
#ne { background-position: -100px 0; }
#sw { background-position: 0 -100px; }
#se { background-position: -100px -100px; }