placeholder生成占位图片的js插件

2015-12-24 10:41/来源: 网络 /发表在 JS代码 > 其他代码/浏览数:0

admin  Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15Rank: 15
这家伙很懒,什么也没留下...

niuqiqi211016.jpg


placeholder.js是一款轻量级的可在浏览器端生成占位图片的javascript库插件。插件大小小于1kb,不依赖于任何js框架,并提供完善的配置参数和简单的方法。


它的特点还有:

  • 不依赖任何框架javascript框架,例如jQuery

  • 小于1k,具体是0.98k,增加img配置方式之后,为1.52kb。

  • 配置参数项多,都有默认值。

  • 使用简单。

placeholder图片占位插件效果预览


配置参数

Placeholder配置项用于API方法的输入参数, 例如:placeholder.getData({text: 'Image 404'})。 或者作为URL参数样式作为img的属性配置,例如: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

  • placeholder.getData(opts):获得placeholder图片的base64字符串,可以直接在img标签的src属性中使用,或者在css的背景中使用。

  • placeholder.getCanvas(opts):获得canvas元素, 可以直接插入到DOM结构中。

image placeholder插件的github地址为:https://github.com/hustcc/placeholder.js


授权:共享版

运行环境:Chrome/Firefox/Opera/Safari/IE9+

猜你喜欢

子导航JS代码

推荐信息

排行榜TOP