概述

圖片占位符工具，提供了生成占位圖片的功能（占位圖的含義，請參考SVG占位圖工具中的說明），可以使用本工具提供的功能，快速生成占位圖圖片。占位圖，在原型設計、PPT 演示稿、產(chǎn)品說明文檔等場景中廣泛使用，是 UI 設計師、產(chǎn)品經(jīng)理等人員必備的效率工具之一。

圖片占位符工具生成的占位圖片，比SVG占位圖有更好的瀏覽器兼容性（可支持 IE 6/7/8），但生成的圖片體積比 SVG 占位圖大，因此，在加載速度上比 SVG 占位圖稍慢。

圖片占位符組成格式

本工具生成的圖片，提供了圖片訪問鏈接以及對應的 img 標簽兩種形式。其中，圖片鏈接可直接在瀏覽器中打開；img 標簽，可以嵌入 HTML 代碼中使用。完整的圖片鏈接如下：

./imgplaceholder/{widht}x{height}?fontsize={fontsize}&text={text}&forecolor={forecolor}&bgcolor={bgcolor}

參數(shù)說明如下：

• width：占位圖寬度，單位為px，默認為 800px 寬，必須
• height：占位圖高，單位為px，默認為 240px 高，必須
• fontsize：占位圖上文字大小，默認為 42px 大小
• text：占位圖上顯示的文字內(nèi)容，默認顯示為 {width}x{height}
• forecolor：占位圖上文字的顏色，默認為 #FFFFFF
• bgcolor：占位圖的背景色，默認為 #DDDDDD

你可以根據(jù)圖片鏈接格式以及支持的參數(shù)，自行構(gòu)造需要的占位圖片。

補充說明

關于圖片占位符生成工具，有以下幾點補充：

• width 和 height 這 2 個參數(shù)要求必填，其余參數(shù)均可選填（不填時將使用參數(shù)默認值）
• 占位圖文字，不超過 10 個字符（能表達基本意思即可，字符太多顯示效果也不好）
• 為保證基本的視覺效果，占位圖上的字體大小，最小 12px，最大 64px
• 文字顏色和背景色，支持 FFF、#FFF、FFFFFF、#FFFFFF 這 4 種顏色格式（注意，可以不帶 # 符號）
• 目前不支持去掉占位圖上的水印 o(╯□╰)o