1つの大きな画像をタイル上に分割し、HTMLで表示させるジェネレーター

Question

1枚の大きな画像をタイル上に分割したものを、HTML上で並べ1枚の画像にみえるようにしたいのですが、簡単なジェネレーターなどはあるのでしょうか。

以下がサンプルサイトです。

https://http2.golang.org/gophertiles

※もともとは1枚の画像をこのように32×３２の画像に分割しHTML上で並べて表示しています。

Answer 1

html5 canvasのdrawImageとtoDataURLを利用してみるのはどうでしょうか？

以下の例では、javascriptで<img>要素から分割した<img>要素を動的に生成します。

余白なしDEMO

var sprite= {width:32,height:32}

var image= new Image
image.crossOrigin= 'Anonymous'
image.src= 'https://cdn.rawgit.com/nagadomi/otama/master/image/lena.jpg'
image.onload= function(){
  var canvas= document.createElement('canvas')
  canvas.width= sprite.width
  canvas.height= sprite.height

  var context= canvas.getContext('2d')
  for(var i=0; i*sprite.height<image.height; i++){
    for(var j=0; j*sprite.width<image.width; j++){
      context.drawImage(
        image,j*sprite.width,i*sprite.height,
        sprite.width,sprite.height,
        0,0,
        sprite.width,sprite.height
      )

      var spriteElement= new Image
      spriteElement.src= canvas.toDataURL()

      document.querySelector('#container').appendChild(spriteElement)
    }
  }
}

補足：stackoverflow上でもsprite、tileなどで検索するとjsを使わずcssを使用した例などの回答も見つけられましたが、質問にピンポイントなライブラリは見つかりませんでした。
EaselJSやenchant.jsなどのSpriteが回答に近いですが、これはゲーム用に最適化されていて、動的に画像を作る機能がメソッドとして用意されていないように見えました。また両者とも、<canvas>を使うことが前提です。

Comments

[ashly]

ありがとうございます。　こんな方法があるんですね。
しかし私の質問のしかたがアバウト過ぎたのかもしれません。
じつは、パフォーマンステスト目的であえて３２×３２の細かい画像を生成して分割された画像分ブラウザからリクエストを投げさせると言うことが目的でした。

こちらの場合JSで操作しているためリクエスト自体が画像１つ１つに対してではない状況です。※本来負荷を減らすためには大変いいことなのですが。。。

しかしながら、画像の３２・３２のタイル上に分割ということは行えておりますので、最悪これらの画像を全て保存し手動でHTMLのコーディングを行ってならべようかと考えています。

[think49]

To: redbox さん
一つの画像ファイルをHTTPリクエストする方がパフォーマンスが上がると思うのですが、PCの負荷テストが目的なのでしょうか。

[ashly]

think49さん　はいそうです。この画像はサーバーのパフォーマンステスト用で利用することが目的です。

Answer 2

To: redbox さん

ジェネレータがどのようなものを希望されているのかわかりませんが、JavaScriptでコードを書くなら、ご希望の動作は「img要素ノードを指定回数生成⇒br要素ノードを生成」を繰り返せば可能ですね。
createDocumentFragment, createElement, appendChild を利用してみてはどうでしょうか。

Comments

[ashly]

ありがとうございます。　JAVASCRIPTでコードを生成することも検討したのですが、画像自体をImagemagicなどで分割した連番のものを、ひとまず手動でコーディングしてならべることにしました！