1kb 的 placeholder.js 增加 img 标签使用方式

[50vip]

## 预览

[官方网站示例]( http://github.atool.org/placeholder.js.html)、 [项目 github 地址]( https://github.com/hustcc/placeholder.js)




## 使用

引入 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 结构中。