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

使用

引入 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 tosize.

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

====================================分割线================================文章转载自 开源中国社区[http://www.oschina.net]