[JS]ローカル環境でも利用できるダミー画像を生成するスクリプト -Holder.js

サイズやカラーをテキストで指定するだけで簡単にダミー画像を生成できる超軽量（4KB）のスクリプトを紹介します。

Holder.js -GitHub

[ad#ad-2]

• Holder.jsのデモ
• Holder.jsの使い方

Holder.jsのデモ

対応ブラウザ

Holder.jsはcanvasとdata URI schemeを使用しているため、下記のブラウザでご覧ください。

• Chrome 1+
• Firefox 3+
• Safari 4+
• Internet Explorer 9+

Holder.js

[ad#ad-2]

Holder.jsの使い方

使い方は、2ステップです。

Step 1: 外部ファイル

当スクリプトを外部ファイルとして記述します。

<script src="holder.js"></script>

Step 2: HTML

ダミー画像を設置したい場所にimg要素で記述します。
3つの簡単なパターンをキャプチャとともに紹介します。

デフォルトのシンプルなダミー画像です。

<img src="holder.js/380x180">

「src」に「holder.js」を指定し、サイズを記述します。

3つのテーマが用意されており、それを使用します。

<img src="holder.js/380x180/industrial">

テーマはgray, industrial, socialの3種類、サイズの後に記述します。

背景と前景のカラーを個別に設定します。

<img data-src="holder.js/380x180/#000:#fff">

data属性を使用し、背景・前景を「:」で区切って指定します。

オリジナルのテーマを作成することも可能です。

Holder.run({
    domain: "example.com",
    themes: {
        "simple":{
            background:"#fff",
            foreground:"#000",
            size:12
            }},
    images: "#new"
    })

HTMLは下記のようになります。

<img data-src="example.com/100x100/simple" id="new">