一個不到 1kb 的 image placeholder 的 js 庫

image-placeholder.js

一個Javascript庫，用於在瀏覽器端生成placeholder image，提供完善的配置和簡單的方法。EN-Readme

Github：https://github.com/hustcc/placeholder.js

預覽

官方網站示例

特色

1. 不依賴任何 js 框架，好比 jq

2. 小於 1k ，具體是0.98k，增長img配置方式以後，爲1.52kb

3. 配置項多，都有默認值

4. 使用簡單

使用

引入 placeholder.js 到你的前段代碼中:

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

1. 調用placeholder.js的方法進行替換，舉個例子以下:

<img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})">

2. 使用URL參數的方式配置Img的屬性options，例如：

<img class="placeholder" />

或者攜帶參數options:

<img options="size=256x128&text=Hello!" class="placeholder" />

請注意img標籤的class屬性必須placeholder。

Placeholder 配置項

Placeholder 配置項用於API方法的輸入參數, e.g. placeholder.getData({text: 'Image 404'}). 或者做爲URL參數樣式做爲img的屬性配置， e.g. options="size=256x128&text=Hello!"

• size: placeholder圖片尺寸. 例如: 256x128, 默認: 128x128.

• bgcolor: 背景顏色. 例如: #969696. 默認: random.

• color: 前景顏色，文字顏色. 例如: #ccc. 默認: random.

• text: 自定義文本內容. 例如: Hello World, 你好. 默認: equal to size.

• fstyle: 字體樣式. 能夠是 normal / italic / oblique. 默認: oblique.

• fweight: 字體weight. 能夠是 normal / bold / bolder / lighter / Number. 默認: bold.

• fsize: 字體大小. 默認: 自動 計算字體大小防止文字超出圖片大小.

• ffamily: 字體. 默認: consolas.

具體參數配置例子:

var opts = {
      size: '512x256',
    bgcolor: '#ccc', 
    color: '#969696',
    text: 'Hello World, 你好',
    fstyle:'oblique',
    fweight: 'bold',
    fsize:'40',
    ffamily: 'consolas'
}
console.log(placeholder.getData(opts)) //get the base64 of the placeholder image.

做爲img的options屬性爲：

size=256x128&text=Hello!&bgcolor=#ccc&color=#969696&fstyle=oblique&fweight=bold&fsize=40&ffamily=consolas

Placeholder 方法

• placeholder.getData(opts): 得到placeholder圖片的base64字符串，能夠直接在img標籤的src屬性中使用，或者在css的背景中使用。

• placeholder.getCanvas(opts): 得到canvas元素, 能夠直接插入到DOM結構中。

爲何要造輪子

1. 不少 image placeholder 都是在服務端生成，須要額外搭建服務以及耗費資源。

2. imsky/holder是客戶端生成，大名鼎鼎，可是在用到網頁上，動態圖片的時候，它的那種風格用起來不太方便。

3. 其餘的 image placeholder 太大了，好比上面提到的 holder 壓縮以後還有 30k 以上，其實不太使用在網頁上使用。

待完成

1. 更多的靈活配置。

2. 做爲瀏覽器端的js庫，儘量的壓縮大小。

其餘

任何問題歡迎反饋和 pr ，代碼很是簡單，相信 1 分鐘你就能夠看懂，很是歡迎push request。