一个image placeholder客户端Javascript生成库

一、概述

placeholder,做过html都会知道,在input里面有一个属性是placeholder,这个属性是用到在input为空的时候,显示一个提示图片。
本项目地址为:https://github.com/hustcc/placeholder.js  
website.png

二、起因

个人在开发过程中,需要处理很多的APP logo,这些logo是从ipa和apk中dump出来的,有些可能加密无法完全解密。所以在logo打不开的时候,需要显示一个替代信息,方法有二:

1. 使用img的alt属性,当图片打不开的时候,显示alt文字;
2. 加载失败使用一个empty图片代替;

都有确定,方法1可能造成页面样式变化,因为img和text还是有差距的;方法2也有问题,所有失败的图片均使用相同的图片替代,辨识度低。

三、已有方案

这里就需要使用image的placeholder,最简答的方式,这种其实大家经常看到,比如网站的广告位预留,占位图片等等。但是要做到动态的图片,这就需要其他的一些手段了,方法有二:
1. 通过搭建一个web server,专门生成图片,然后通过传入一些参数来动态生成图片
这个比较多,也比较主流吧,例如:temp.im,placeholder.it等都是通过服务端生成,至于怎么生成,php使用gd,py使用pil等;
2. 通过浏览器客户端生成,github上有一个项目:https://github.com/imsky/holder 使用客户端生成,具体可以去github上参考。

四、本方案

本项目地址为:https://github.com/hustcc/placeholder.js   
演示网站:http://github.atool.org/placeholder.js.html   (代码使用上述imsky/holder的主页代码,修改placeholder生成方式)

为什么已经有holde项目,还要做一个placeholder.js的项目?二者做的都是客户端生成placeholder
1. holder的使用方式是参考server端生成placeholder的使用方式——使用url传递参数的方式,这种方式在浏览器端使用js并不是非常方便;
2. holder的Javascript库太大,压缩之后30kb,对于仅仅只是生成一个placeholder图片,而耗费30kb,并不划算;
3. server端生成图片比较耗费服务器资源,特别是一个页面生成图片比较多的时候,容易造成大量并发,而如果对图片来进行缓存,又会导致各种碎片文件。

本项目的特点:
1. 非常小:1kb都不到,后续更新尽量维持在1kb之类,也要有一个噱头;
2. 使用非常简单,几个简单易懂的配置项,两个api方法(一个获取base64,一个获取canvas);
3. 动态字体大小,在字体未设置的情况下,自动调整字体大小,方式文字overflow;
欢迎issue和PR。

0 个评论

要回复文章请先登录注册