测试用占位图像的生成工具 (Placeholder Image / Image Mocking)

最新推荐文章于 2024-09-07 09:04:48 发布

原创最新推荐文章于 2024-09-07 09:04:48 发布 · 364 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#人工智能 #php

杂七杂八专栏收录该内容

30 篇文章

订阅专栏

本文介绍了几种在线生成占位符图片的服务，包括设置尺寸、颜色、文本等内容的自定义选项。这些服务适用于网页设计阶段，为最终图像加载前提供临时视觉填充。

[b]（1）[url=http://dummyimage.com/]http://dummyimage.com/[/url][/b]
用PHP写的，基于MIT License代码开源。可以设置图像的宽度、高度、背景色、前景色、图像格式、文本。

URI格式：
http://dummyimage.com/宽度x高度/背景色/前景色.图像格式&文本

例如：
http://dummyimage.com/320x240/333333/00a2ff.png&text=RENSANNING
[img]http://dummyimage.com/320x240/333333/00a2ff.png&text=RENSANNING[/img]

[b]（2）[url=http://placehold.it/]http://placehold.it/[/url][/b]
功能基本等同于dummyimage.com

例如：
http://placehold.it/320x240/333333/00a2ff.png&text=RENSANNING
[img]http://placehold.it/320x240/333333/00a2ff.png&text=RENSANNING[/img]

[b]（3）[url=http://fpoimg.com/]http://fpoimg.com/[/url][/b]
除了不能设置图像格式，只能输出PNG外其他功能基本等同于dummyimage.com，就是URI的格式稍有不同。

例如：
http://fpoimg.com/320x240?text=RENSANNING&bg_color=333333&text_color=00a2ff
[img]http://fpoimg.com/320x240?text=RENSANNING&bg_color=333333&text_color=00a2ff[/img]

[b]（4）[url=http://placehold.jp/]http://placehold.jp/[/url][/b]
可以设置：宽度、高度、前景色、背景色、文字大小、图像格式（PNG/JPG）、文字、CSS

例如：
http://placehold.jp/46/cc9999/993333/320x240.png?text=RENSANNING
[img]http://placehold.jp/46/cc9999/993333/320x240.png?text=RENSANNING[/img]

[b]（5）[url=http://placekitten.com/]http://placekitten.com/[/url][/b]
这个除了能设置宽度和高度外，有趣的是图像都是猫。

比如：
http://placekitten.com/320/240
[img]http://placekitten.com/320/240[/img]

[b]（6）[url=http://placeimg.com/]http://placeimg.com/[/url][/b]
这个除了能设置宽度和高度外，还可以指定输出图像的分类（animals、arch、nature、people、tech），图像的颜色（grayscale,sepia）

例如：
http://placeimg.com/320/240/tech/sepia
[img]http://placeimg.com/320/240/tech/sepia[/img]

[b]（7）[url=http://lorempixel.com/]http://lorempixel.com/[/url][/b]
<img src="http://lorempixel.com/640/340/sports/">
[img]http://lorempixel.com/640/340/sports/[/img]

[b]（8）[url=http://uifaces.com/]http://uifaces.com/[/url][/b]
[img]http://dl2.iteye.com/upload/attachment/0093/7022/7721c5fc-01f1-303b-b5b3-5787383e6bdc.png[/img]

[b]（9）[url=http://cambelt.co/]http://cambelt.co/[/url][/b]
可以指定Font或者显示Icon。
<img src="http://cambelt.co/300x200/rensanning?color=234653,eeeeee&font=Dyno-Bold">
[img]http://dl2.iteye.com/upload/attachment/0095/7144/f4e70069-5b36-395b-97d6-88617521c179.png[/img]

更多：[url=http://net.tutsplus.com/articles/web-roundups/the-top-8-placeholders-for-web-designers/]http://net.tutsplus.com/articles/web-roundups/the-top-8-placeholders-for-web-designers/[/url]