1kb 的 placeholder.js 增加 img 标签使用方式
预览
使用
引入 placeholder.js 到你的前段代码中:
<script src="placeholder.js"></script>
1.
调用 placeholder.js 的方法进行替换,举个例子如下:
<img src="data: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 结构中。
最新文章
- LIBCD.lib(wincrt0.obj) : error LNK2001: unresolved external symbol _WinMain@16 Debug/firstapi.exe :
- centos下vsftpd安装与配置
- Scrum项目6.0
- zTree实现地市县三级级联DAO接口实现
- Ext中窗体第二次点击报错或者其内控件不显示的问题,弄了2天才解决,记录下
- 程序ajax请求公共组件app-jquery-http.js中url参数部分的项目应用
- 《R包的分类介绍》
- 在windows下,将mysql离线数据文件导入本地mysql数据库
- 第二章之S5PV210在BL1中点亮LED灯
- python字符串操作实方法大合集
- 说一说MVC的过滤器(一)
- JS 对Array集合排序的方法
- zabbix web 登录成功后提示(红色提示):zabbix server is not running:the information displayed may not be current
- 百度编辑器插入视频、iframe 失败
- iOS - Block的循环引用内存泄漏问题探索
- oracle与DB2
- spring boot(15)-异常处理
- Redis学习---Redis操作之Set
- oracle查询用户的权限
- javascript有哪些优秀的库,把你喜欢的都说出来吧