html5 占位图片,placeholder.js-可在浏览器端生成占位图片的js插件

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

不依赖任何框架javascript框架，例如jQuery。

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

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

使用简单。

使用方法

使用该图片占位插件需要引入placeholder.js文件。

1、可以调用placeholder.js的方法对图片进行替换，例如下面的例子:

2、可以使用URL参数的方式配置Img的属性options，例如：

或者带参数options:

请注意img标签的class属性必须是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。

参数配置的例子如下：

var opts = {

size: '512x256',

bgcolor: '#ccc',

color: '#969696',

text: 'Hello World, 你好',

fstyle:'oblique',

fweight: 'bold',

fsize:'40',

ffamily: 'consolas'

}

//get the base64 of the placeholder image.

console.log(placeholder.getData(opts))

或者作为img的options属性：

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

方法

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

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

html5 占位图片,placeholder.js-可在浏览器端生成占位图片的js插件相关推荐

如何让Node.js运行在浏览器端
Node.js又称服务端JavaScript. 今天我为了解决一个问题,通过搜索引擎找到了如何将Node.js转成浏览器端可以运行的javascript. 尽管这种方式有其局限性,但是还是可以用的. ...
html谷歌浏览器3D效果图片不出现,chrome浏览器图片无法显示怎么办 chrome浏览器显示不出图片的解决方法...
谷歌浏览器是现在非常多用户常用的浏览器之一,在很多使用的过程中,难免也会遇到一些问题,最近有很多用户在浏览器页面时发现图片无法正常显示,那么这种情况该怎么解决呢?下面教程之家网为大家带来chrome浏 ...
静图怎么做成gif动画图片？三步教你在线生成gif图片
说到gif动图相信大家都不陌生.那么,作为一名软件小白想要自己动手制作专属的gif动态图,要如何操作呢?接下来,给大家推荐一款专业在线gif制作(https://www.gif.cn/)工具-[GIF ...
backbone 模板 html,用Backbone.js绑住服务端生成的html
去年做雪球的timeline模块时我正深受 #newTwitter 的影响,倾向于把尽可能多的逻辑放到客户端去做,最后实现的时候选择了Backbone.js.使用Backbone.js的好处就不说了, ...
php识别图片的条码,如何用php实现生成条形码图片
用php生成一个条形码的图片 ,在自己项目的根目录下建立一个测试文件(直接把下面的代码放进去运行一下看看,在实际的项目中你可以将下面的代码封装到一个公共类文件下的一个函数,然后调用. class te ...
浏览器端JS导出EXCEL
浏览器端JS导出EXCEL FileSaver.js 实现了在本身不支持 HTML5 W3C saveAs() FileSaver 接口的浏览器支持文件保存.FileSaver.js 在客户端保存文件 ...
ES6新语法变量、服务器端js和浏览器端js的区别
服务器端js和浏览器端js的区别 /*** 1.js运行在浏览器端有* ECMAScript:js语法(变量,数据类型,表达式,代码结构)* Bom:浏览器对象模型,用js去操作浏览器窗口* Dom: ...
手机端扣扣浏览器图片居中_实现图片始终居中显示于浏览器窗口中心位置
盒模型在敲代码之前,首先建立一个盒模型,这让写代码的时候变得思路清晰. 本案例中,所要实现的是图片居中显示,超出浏览器窗口部分的图片隐藏.因此,盒模型如图: 图片以浏览器窗口作为定位元素,居中显示. ...
「首席架构师推荐」一系列很棒的的浏览器端JavaScript库资源
包管理器托管JavaScript库并提供用于获取和打包它们的工具. npm - npm是JavaScript的包管理器. Bower - 网络包管理器. component - 用于构建更好的Web ...

html5 占位图片,placeholder.js-可在浏览器端生成占位图片的js插件

html5 占位图片,placeholder.js-可在浏览器端生成占位图片的js插件相关推荐

最新文章

热门文章