分享一个在线占位图制作工具

给大家分享一个在线占位置，生成图片的一个工具

先说一下为什么需要这个？
我们在制作一个网站，或者交付前端项目时，难免会使用到图片素材，有的喜欢使用在线地址来引用图片路径，还有的比较喜欢搜图片保存之后再进行更改。

• 但是我觉引用图片路径的时候，比较占用页面打开的时间，反正就是很慢，文字出来了，图片还没有出来，网络不佳就是看不到图片，场面显得有些尴尬，虽说客户要这样的效果，但是你这个图片没出来，说不定就对你写的东西产生怀疑，你就又去改改；
• 而下载图片吧，你就需要去各大网站去寻找图片，内容稍微还像那回事，但是挺耗费时间的，下载下来要么达不到你预期的格式，要么你就要改改

那么有没有一个在线的图片生成工具呢，根据项目的需要自己去在线生成？
答案是肯定有的，不过下面的这个只是推荐，附使用说明

工具的使用

站点的地址 https://placeholder.com/

可选颜色（部分）：

使用HEX表示法（16进制）。可作为背景颜色或者文字颜色，如需其他的颜色可凭借着自己经验进行搭配

红（FF0000）	橙（ffa500）	黄（ffff00）	绿（008000）	青（00ffff）
蓝（0000ff）	紫（800080）	黑（000）	白（fff）	灰（a3a3a3）

图片格式（已知）

目前支持的图片格式有下面四种，这些图片格式足够我们日常使用了

.GIF、 .JPG 、 .JPEG、 .PNG

格式规则

要点一：生成访问路径为：http://via.placeholder.com/或 https://via.placeholder.com/；
要点二：必须要给大小，不给大小就到官网了，给一个就是width = height，给两个就是width x height；
要点三：需要改变其默认颜色，就必须给定一个背景色；要是只改变默认的文本色这个是不能的，必须先给背景色然后再给文本色；
要点四：图片的格式位置可以紧跟着大小或背景或文本属性后，也可以单独出现在斜线符号之后，需要加 .图片格式 来表示；
要点五：斜线符号前后不要带有空格，如大小属性、背景属性、文本属性，否则会直接404或者内容达不到正常效果（颜色不是红色或者格式不是正常的图片格式）；
要点六：保存的文件名称是最后一个斜线后面的文字的内容，不含有问好之后，如 /aaa?text=neirong ，那么它的文件名称为aaa，图片格式如果没有设置就是png格式

需要注意文本内容不能是中文，中文是不能的，英文是可以滴，这点要切记！！！

---

• 生成150的图=> https://via.placeholder.com/大小
  https://via.placeholder.com/150
• 生成背景色是红色=> https://via.placeholder.com/大小/背景色
  https://via.placeholder.com/150/FF0000
• 生成文本色是白色=> https://via.placeholder.com/大小/背景色/文本色
  https://via.placeholder.com/150/FF0000/FFFFFF
• 生成 .GIF/.JPG/.JPEG/.PNG 的图片=>
  https://via.placeholder.com/大小.图片格式/背景色/文本色 或
  https://via.placeholder.com/大小/背景色.图片格式/文本色 或
  https://via.placeholder.com/大小/背景色/文本色.图片格式或
  https://via.placeholder.com/大小/背景色/文本色/.图片格式
• 生成有文本内容的图=> https://via.placeholder.com/大小/背景色/文本色?text=文本内容
  https://via.placeholder.com/150/FF0000/FFFFFF?text=today

生成示例

1. 生成一个图片大小为150x150

直接访问： https://via.placeholder.com/150

可以观察发现，默认的颜色为灰色系，大小为一个正方形，
因为我们只给了一个150，那么它就默认width和height都是150
如果另存为的话，格式是.PNG的

2. 生成一个图片大小为200x300，背景色为红色，文本色为白色

直接访问： https://via.placeholder.com/200x300/FF0000/fff

可以观察发现，整体上的颜色已发生变化，背景变为红色，文本变成白色，宽度是200px，高度为300px

3. 修改另存为图片格式为“ .jpg ”，颜色和大小保持不变

（图片大小为200x300，背景色为红色，文本色为白色）
直接访问：https://via.placeholder.com/200x300/FF0000/fff.jpg

可以观察发现，另存为图片的格式由原来的png格式，也就是默认的格式转变为jpg格式存储

4. 加入“个性化”文字内容到图片

（图片大小为200x300，背景色为红色，文本色为白色，图片格式为 .jpg）
直接访问：https://via.placeholder.com/200x300/FF0000/fff.jpg?text=‘个性化’

可以观察发现，文本内容 “ 个性化 ”，居然不见了，
这就是上面所说到的**格式规则** 中最后的注意谈到的

为了表明是不能够支持中文，我们可以这样操作
直接访问：https://via.placeholder.com/200x300/FF0000/fff.jpg?text='a个性化s'

可以观察发现，文本内容 “ 个性化 ”，不见了，
但是出现了 'a s'，这起码能说明中文是不可行的，不过中文的标点符号倒是可以，中文汉字不支持，这点要记得

5.关于图片命名

其实就是另存为，出现的默认名称，那么怎么才能有点风格（独特），例如aa.jpg或者我爱你123.jpg呢？

1.图片格式【*.png】，文件名：【FFFFFF.png】
https://via.placeholder.com/150/FF0000/FFFFFF?text=today

2.图片格式【*.png】，文件名：【下载.png】
https://via.placeholder.com/150/FF0000/FFFFFF/?text=today

3.图片格式【正常】，文件名【正常】，建议这个
https://via.placeholder.com/150/FF0000/FFFFFF/aa.jpg ==?text=today
https://via.placeholder.com/150/FF0000/FFFFFF/我爱你123.jpg?text=today

4.图片格式【*.jpg】，文件名：【jpg.jpg】
https://via.placeholder.com/150/FF0000/FFFFFF/.jpg?text=today

5.图片格式【*.png】，文件名：【aa.png】
https://via.placeholder.com/150/FF0000/FFFFFF/.aa?text=today

小结：

• 1、文本色作为文件名称，格式默认png（a.如果不写文本色、就是背景色为文件名称；b.如果文本色和背景色都不写，就是尺寸为文件名称）；
• 2、下载作为文件名称，格式默认png；
• 3、比较正常，适合复杂多变场景（格式能定义、文件名可以定义）；
• 4、必须要指定一个图片格式才行（如gif,jpg,jpeg,png），要不然就变成默认的png格式，并且文件默认命名和格式等同
• 5、命名可以随意，格式默认png（对比4、5就可以发现出来）

以下可以不看，只是一个思考，也算是总结出来的一些生成规则吧

6.图片格式【*.jpg】，文件名：【jpg_.jpg】
https://via.placeholder.com/150/FF0000/FFFFFF/.jpg ?text=today

7.图片格式【*.png】，文件名：【aa_.png】
https://via.placeholder.com/150/FF0000/FFFFFF/.aa ?text=today

8.图片格式【*.jpg】，文件名：【_.jpg】
https://via.placeholder.com/150/FF0000/FFFFFF/ .jpg?text=today

对比6和7，发现空格变成了 “_”，而非图片格式（.aa）就变成png默认格式，命名也变成aa_.png了
对比6和8，发现点号前空格和问号前空格的文件命名有所不同，点号前是"_"+格式，问号前是格式+格式

9.图片格式【.jpg】，文件名：【=.jpg】
https://via.placeholder.com/150/FF0000/FFFFFF/=.jpg?text=today

10.图片格式【*.jpg_】，文件名：【=.jpg_】,注：一个空格
https://via.placeholder.com/150/FF0000/FFFFFF/=.jpg ?text=today

11.图片格式【*.jpg】，文件名：【=.jpg】,注：两个空格
https://via.placeholder.com/150/FF0000/FFFFFF/=.jpg  ?text=today

12.图片格式【*.jpg】，文件名：【=.jpg】,注：三个空格
https://via.placeholder.com/150/FF0000/FFFFFF/=.jpg    ?text=today

对比9和10，发现问号前的空格变成了 “_”，与之格式后也加了 “_”
但综合对比9,10,11,12，发现问号前如果出现两个或两个以上的空格就变成默认（12=11=8），格式和文件名一致

13.图片格式【*.jpg】，文件名：【jpg=.jpg】,注：一个等于号
https://via.placeholder.com/150/FF0000/FFFFFF/.jpg=?text=today

14.图片格式【*.jpg】，文件名：【jpg==.jpg】,注：二个等于号
https://via.placeholder.com/150/FF0000/FFFFFF/.jpg==?text=today

15.图片格式【*.*】，文件名：【jpg===】,注：三个等于号
https://via.placeholder.com/150/FF0000/FFFFFF/.jpg===?text=today

16.图片格式【*.*】，文件名：【jpg===】,注：四个等于号
https://via.placeholder.com/150/FF0000/FFFFFF/.jpg====?text=today

综合对比13,14,15,16，超过三个等于号（包含三个），格式就是 “ *. ”，文件名就是格式+ ===*

17.图片格式【*.jpg】，文件名：【==.jpg】
https://via.placeholder.com/150/FF0000/FFFFFF/==.jpg?text=today

18.图片格式【*.jpg】，文件名：【==.jpg】
https://via.placeholder.com/150/FF0000/FFFFFF/==.jpg=?text=today

19.图片格式【*.jpg=abcd】，文件名：【==.jpg=abcd】
https://via.placeholder.com/150/FF0000/FFFFFF/==.jpg=abcd?text=today

20.图片格式【*.jpgabcd】，文件名：【==.jpgabcd】
https://via.placeholder.com/150/FF0000/FFFFFF/==.jpgabcd?text=today

对比17,18，问号前出现一个等号并不影响格式和文件名
对比19,20，格式后加等号和不加等号会出现不一样的结果。

21.图片格式【*.jpg =_】，文件名：【_.jpg =_.jpg =_】
https://via.placeholder.com/150/FF0000/FFFFFF/ .jpg = ?text=today

22.图片格式【*.png】，文件名：【_.png】
https://via.placeholder.com/150/FF0000/FFFFFF/ .aa = ?text=today

对比21,22，非图片格式含有空格直接以“_”+“.png”作为文件名称，图片格式默认是png格式；
而图片格式，空格使用"_"命名，格式和等号之间有空格则就是空格

单独分析21，并结合6，可以发现格式后有空格，命名就是格式+格式

6.图片格式【*.jpg】，文件名：【jpg_.jpg】
https://via.placeholder.com/150/FF0000/FFFFFF/.jpg ?text=today
21.图片格式【*.jpg =_】，文件名：【_.jpg =_.jpg =_】
https://via.placeholder.com/150/FF0000/FFFFFF/ .jpg = ?text=today

最后得出的结论
通用的简单的规则（伪规则，不太会正则），也就是第3条，建议使用的那种：
size(.gif|.jpeg|.jpg|.png)/bgcolor(.gif|.jpeg|.jpg|.png)/color(.gif|.jpeg|.jpg|.png)/?text=txt

延伸拓展

• 另存为.exe，得到文件名为FFFFFF.exe的程序，直接运行是看不到里面内容，无法运行啊？
  那如何看内容，可以改下后缀名，试试看，用图片格式吧。（附效果图，还阔以）

https://via.placeholder.com/150/FF0000/FFFFFF.exe （.exe前要空格和不要空格，都能够另存为exe）

• 难度再上升一下，搞个个性名称，格式还是exe，这里就不上传效果图了

https://via.placeholder.com/150/FF0000/FFFFFF/你好啊，我的程序.exe

• 继续，再加入一些文字内容进来

https://via.placeholder.com/150/FF0000/FFFFFF/你好啊，我的程序.exe?text=hello my exe

什么情况，居然变成了默认的png格式，难道不能加文本并还能够保存exe格式吗？

• 好像还真不行，可以看第21和22条，要带图片格式（必须要包含），那加个试试
  解决一：下面这种是比较实用的，因为格式是*.*，自己在另存为的时候将文件名其后直接加上后缀就可以了

保存的文件名为：jpg我的程序，文件格式为*.*
https://via.placeholder.com/150/FF0000/FFFFFF/jpg我的程序?text=hello my exe

• 另一种的格式较为固定
  解决二：格式命名形式 “=” +“图片格式”+“文件格式”，其中等于号和图片格式是必须要有的，文件格式随意

保存的文件名为：=.jpgabcd ，文件格式为*.jpgabcd
https://via.placeholder.com/150/FF0000/FFFFFF/=.jpgabcd?text=hello my exe

对于解决一和解决二，必须要含有图片格式，缺胳膊少腿的都不行，要不然又恢复到了png，这就达不到想要的结果。

行吧，就到这吧，好久没写这么长的博客了