占位图服务 placeholdit

[xjchengo]

目前已经有很多提供占位图服务的网站了，比如placehold.it、dummyimage.com。但是不是速度太慢不稳定，就是功能不齐全。我根据七牛提供的图片处理功能做了一套提供占位图服务的接口，速度不错，分享给大家。程序托管在SAE上，使用方法如下。

指定尺寸

• placeholdit.sinaapp.com/width 只指定宽度时会生成矩形图片，如 placeholdit.sinaapp.com/300 会生成一张300x300的占位图
• placeholdit.sinaapp.com/widthxheight 同时指定宽和高，如 placeholdit.sinaapp.com/300x200 会生成一张300x200的占位图
• placeholdit.sinaapp.com/widthxradio 指定宽和一个比例，如 placeholdit.sinaapp.com/300x3:2 会生成一张300x200的占位图
• placeholdit.sinaapp.com/widthxradio 指定一个比例和高，如 placeholdit.sinaapp.com/3:2x200 会生成一张300x200的占位图

指定背景颜色及字体颜色

• placeholdit.sinaapp.com/size/backgroundcolor 指定背景颜色，字体颜色缺省为#969696，如 placeholdit.sinaapp.com/300x200/000000 会生成一张黑色背景的300x200的占位图
• placeholdit.sinaapp.com/size//fontcolor 指定字体颜色，背景颜色缺省为#CCCCCC，如 placeholdit.sinaapp.com/300x200//000000 会生成一张黑色字体的300x200的占位图
• placeholdit.sinaapp.com/size/backgroundcolor/fontcolor 同时指定背景颜色及字体颜色，如 placeholdit.sinaapp.com/300x200/000000/FFFFFF 会生成一张黑色背景白色字体的300x200的占位图

指定格式

• 在url最后加上需要的图片格式即可，支持jpg、png、gif、webp，缺省为png格式，如 placeholdit.sinaapp.com/300x200.jpg 会生成一张300x200的jpg格式图片

自定义文字

• 给url加上text参数，如 placeholdit.sinaapp.com/300x200?text=hello

自定义字体

• 给url加上font参数，缺省为微软雅黑，支持字体列表见kb.qiniu.com/support-fonts，如 placeholdit.sinaapp.com/300x200?text=你好&font=黑体

自定义字体大小

• 给url加上fontsize参数，单位为缇，等于1/20磅，参考DPI为72，缺省时根据图片大小自动调整，如 placeholdit.sinaapp.com/300x200?fontsize=1000

[timothyye]

mark

[evlos]

赞一个。但是其实不用图片存储/处理服务也可以哦，直接生成 svg 代码附上 Content-Type: image/svg+xml 即可，这样速度可以再快一点，不需要花时间在图片文件处理/读写上。

https://github.com/Evlos/placeholder

[soli]

为什么不用这个？

https://github.com/imsky/holder

[hzlzh]

还有我这个 http://temp.im/ 也是在七牛 CDN

[xjchengo]

@evlos 你这个想法真好，长知识了。如果使用你这种方法在没有缓存的情况下可以减少大概1/3的时间，在SAE上只要40ms左右的时间可以了。

[xjchengo]

@soli 有些时候在页面中引入这个js不太方便

[xjchengo]

@hzlzh 看你介绍的时候说，所有的图片都已生成好，如果支持全部24位色的话，数量真不小。我是先生成了256张256x256大小的图片，其中每个像素颜色都不一样，生成占位图时使用七牛的图片处理功能裁出指定颜色再拉伸到指定尺寸然后打上水印。

[pubby]

这种服务很消耗流量啊

[xjchengo]

@pubby 目前只在v2ex这里分享了。我估算了一下，每25W次请求需要1块钱。

[hzlzh]

@xjchengo 我这个逻辑是第一次生成图片然后就进了 CDN 以后都有了，现在流量很大，不过七牛还是靠谱的

[xiqingongzi]

现在还能用，太赞了！