Image数据占位符定义

2022-01-20 15:01:17 阅读：134 来源： 互联网

标签：200x100 定义 text Image Random 占位 png image Mock

Mock.Random.Image(size?, background?, foreground?, format?, text?), 生成一个随机的图片地址。

size: 指示图片的宽高，格式为 '宽x高'。默认从下面的数组中随机读取一个:

　　　　 ['300x250', '250x250', '240x400', '336x280', '180x150', '720x300', '468x60', '234x60', '88x31', '120x90', '120x60', '120x240', '125x125', '728x90', '160x600', '120x600', '300x600']

background: 指示图片的背景色。默认值为 '#000000'。
foreground: 指示图片的前景色（文字）。默认值为 '#FFFFFF'。
format: 指示图片的格式。默认值为 'png'，可选值包括：'png'、'gif'、'jpg'。
text: 指示图片上的文字。默认值为参数 size。

Mock.Random.image() // http://dummyimage.com/120x60
Mock.Random.image('200x100') // http://dummyimage.com/200x100
Mock.Random.image('200x100', '#FF6600') // http://dummyimage.com/200x100/FF6600
Mock.Random.image('200x100', '#4A7BF7', 'Hello') // http://dummyimage.com/200x100/4A7BF7&text=Hello
Mock.Random.image('200x100', '#50B347', '#FFF', 'Mock.js') // http://dummyimage.com/200x100/50B347/FFF&text=Mock.js
Mock.Random.image('200x100', '#894FC4', '#FFF', 'png', '!') //http://dummyimage.com/200x100/894FC4/FFF.png&text=!

Mock.Random.dataImage(size?, text?),生成一段随机的 Base64 图片编码。

size: 指示图片的宽高，格式为 '宽x高'。默认从下面的数组中随机读取一个.

　　　　　['300x250', '250x250', '240x400', '336x280', '180x150', '720x300', '468x60', '234x60', '88x31', '120x90', '120x60', '120x240', '125x125', '728x90', '160x600', '120x600', '300x600']

text: 指示图片上的文字。默认值为参数 size。

Mock.Random.dataImage() // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAA8CAYAAACtrX6oAAAAAXNSR0IArs4c6QAAA1NJREFUeF7tmL9OG0EQxschMUoiy1FQKgp6eAMqBLwGNNDxAIgGCQr+FFSIDgrgEWiBEp4AahrSRERBhhCfQhztSXMaNntmDsWRZ/JdZ/vz3sz3m5nduxrR5w7hcutADYDdss0TA2DffAHYOV8ABmDvDjjPD3swADt3wHl66GAAdu6A8/TQwQDs3AHn6aGDAdi5A87TQwcDsHMHnKeHDgZg5w44Tw8dDMDOHXCeHjoYgJ074Dw9dDAA/3sHVlcbtLj4nur1Gu3tfaf5+dsiiMnJOh0cfKDh4YHiu1gzM/OWdnaa1GjUcs319SPNzn6j09OsUjIyjtQ6x8cfaWpqsDSOSjfrkbivOnh3t0lzc++epCrhpeCymHUxXP798vInjY19UduYikUWSgw3LJxlHdrcvKfl5Zb6Pr0W9iXgo6MfNDExmHdgDHh7u0kbG3d0ePhAEjgDZOMZRlgnTINwac2XRXJy0qbp6a9POMjfOb6Li080OvqaqhbSfwWYk00ZWGZEbCx/ZjCyCMJ3V1ePxZRgOPGWEO4VJknZaGd9u020sHCbFxt3fKvVKb7rNTzN+n3VwVUBx522tnZX7M+y82PossuXllq0vt7I93QuCtafnWU0MjJQ7Pe8JsOUBZCCrgHQa41ZwLIzuWuCWXy46gZYFkYYqWG0SlgMODaf99jx8Tf54QqAX1iez41oOVLlSJTQuwEOYclDVHw4isd+2ZgH4B4AlnDjA00MIhyOyqDHp+TnCoLHerjn+XmW79GyuFJj+4Xp/9W/mRrRKYCxG5pTtJwQNze/aGjoVVdY4R787B326f39hz+2ApyiK9Rl2YiOXzzIJePHovCSRF6y2xlG+M/W1j2trDTyR7LUyVuuITs2tU/jOVgJuQxw6uUDL5naDxmyhMsdLmHIdXlUxy9VUo8/EnI/wg3e9OWIVtYBZAoHAFhhkmUJAFump4gdgBUmWZYAsGV6itgBWGGSZQkAW6aniB2AFSZZlgCwZXqK2AFYYZJlCQBbpqeIHYAVJlmWALBleorYAVhhkmUJAFump4gdgBUmWZYAsGV6itgBWGGSZQkAW6aniB2AFSZZlgCwZXqK2AFYYZJlCQBbpqeIHYAVJlmWALBleorYAVhhkmXJb925wAd+IrbgAAAAAElFTkSuQmCC
Mock.Random.dataImage('200x100') // data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAAXNSR0IArs4c6QAABVBJREFUeF7tmc2LjlEUwO8wpNmQiFgIJR9FNKUpm1FKLNhYsNHEmpKNlaxspPwBkoWxsLIgESs1KfkqYyyEjRDFgsT46D66053Hc99553ibM2fOz2p6Pec95/7O+b33uc/Tdbj/0u/APwhAoJFAF4IwGRAoE0AQpgMCLQggCOMBAQRhBiAgI8AOIuNGlBMCCOKk0SxTRgBBZNyIckIAQZw0mmXKCCCIjBtRTgggiJNGs0wZAQSRcSPKCQEEcdJolikjgCAybkQ5IYAgThrNMmUEEETGjSgnBBDESaNZpowAgsi4EeWEAII4aTTLlBFAEBk3opwQQBAnjWaZMgIIIuNGlBMCCOKk0SxTRgBBZNyIckIAQZw0mmXKCCCIjBtRTgggiJNGs0wZAQSRcSPKCQEEcdJolikjgCAybkQ5IYAgThrNMmUEEETGjSgnBBDESaNZpowAgsi4EeWEAII4aTTLlBFAEBk3opwQQBAnjWaZMgIIIuNGlBMCCOKk0SxTRgBBZNyIckIAQZw0mmXKCCCIjBtRTgggiJNGs0wZAQRpwW3t5iXh0Im+sGBRz9hVd6+/CBfP3BsXderC7rBsxfzqs9HRX+HG5eFw9cKTsWv2DGwMO/evD93ds6rP3rz+HE4OXJt0x46d2R7WbVkavn39EQbP3Q9Dt16q1DHpwg0HIEiheU1ypEtzSXI50v/nA1yXI13z7MHbcPb4nbZGp56jSZCpqKOtYmfYRQjSQpD9R3rDjcHh6pc6FybtAGn441fEXeP5o3djO04SIA1uijl4fGvYtmt1cRdoKid+x8LFPeH54/dhU9/yf2Knqo4ZNvttLQdB2sL096LSsH/68DWcPz0URh6+C+k2KH5268pI2LFvbXWLlnadvh0rw4GjvWFez5zqs1UbFlW3Z/muULqVKsmVPv+fOuq3jZPAMqMvRZA225sPdtod0iDnZ4p8WIduvgz9e9eE7rmzx84l+U4UBbl3+9W4XefF0w/VeSXtSvlZpiRIJ+pAkOZBQJA2BMmHOv+lr+8o8atyQeKO0tu/Ytyw1wWJg5kPfvz+uOM0nVFKgnSqjjZQuLsEQSZoeX7Irh+OO/nLnR+y81ulvDx2kKn3E0FaMM/laHo0m5836meQeH084OfnjbhbpFu1/LYrP9/Ev0uPcScSpOkMMtk6pn4Ep3dGBGnxFCu9Ayk9ku3U06M0+PEdyuj3n9UBvknIkiCdqmN6j6pOdQhS4F56fxEvT7/U8e/6i8T6DpCGup4mSVc//H98+6V6DNz0wrEkSOmdTb4TTVSHzvhN/6wIUuhRaaByQeIhvD6cTbdH9e9KcuSx+e1ROo/Uv6vVO5T/qWP6j6lehQiix57MBgggiIEmUaIeAQTRY09mAwQQxECTKFGPAILosSezAQIIYqBJlKhHAEH02JPZAAEEMdAkStQjgCB67MlsgACCGGgSJeoRQBA99mQ2QABBDDSJEvUIIIgeezIbIIAgBppEiXoEEESPPZkNEEAQA02iRD0CCKLHnswGCCCIgSZRoh4BBNFjT2YDBBDEQJMoUY8AguixJ7MBAghioEmUqEcAQfTYk9kAAQQx0CRK1COAIHrsyWyAAIIYaBIl6hFAED32ZDZAAEEMNIkS9QggiB57MhsggCAGmkSJegQQRI89mQ0QQBADTaJEPQIIoseezAYIIIiBJlGiHgEE0WNPZgMEEMRAkyhRjwCC6LEnswECCGKgSZSoRwBB9NiT2QABBDHQJErUI4AgeuzJbIAAghhoEiXqEUAQPfZkNkAAQQw0iRL1CCCIHnsyGyCAIAaaRIl6BP4ADhniFk8CoVkAAAAASUVORK5CYII=
Mock.Random.dataImage('200x100', 'Hello Mock.js!') // data:image/png;base64,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

标签：200x100,定义,text,Image,Random,占位,png,image,Mock
来源： https://www.cnblogs.com/kmqz/p/15823480.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Image数据占位符定义