代码拉取完成，页面将自动刷新
同步操作将从 小为/placeholder.js 强制同步，此操作会覆盖自 Fork 仓库以来所做的任何修改，且无法恢复！！！
确定后同步将在后台操作，完成时将刷新页面，请耐心等待。
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <meta name="viewport" content="width=device-width"> <link rel="shortcut icon" href="favicon.ico" type="image/x-icon"> <title>placeholder.js - client side image placeholders / placeholder.cn</title> <meta name="keywords" content="placeholder.js,placeholder.cn,images placeholders,image placeholder creator,holder.js,holderjs"> <meta name="description" content="Client-side library generate image placeholders. Do not depends on jQuery or Other. Create free images placeholders for your web design / print projects."> <style type="text/css"> body{padding:0;margin:0;font-family:sans-serif;background:#fff}body.etc{font-family:"Droid Sans","FreeSans",sans-serif}a{color:#5c9f7e}a:hover{color:#4d8569}a,a:hover{transition:color .1s ease-in}h1,h2{margin:0;letter-spacing:-1px}h2.ie{font:3em inherit;color:red;position:fixed;top:0;margin:0;z-index:2;width:100%;background:yellow}#content{position:absolute;z-index:1;top:120px;left:0;height:230px;color:#555;font-size:12px}#content-inner{padding:20px;overflow:hidden;width:910px}.block{float:left;width:200px;margin-right:40px}#server_holder{width: 330px;padding-left:10px;border-left: 1px dashed #ccc;} #details{width:240px}.block.header h1{margin-bottom:20px;color:#78c9a9;font-size:24px}.block h2{color:#aaa;font-size:16px;line-height:20px;margin-bottom:8px}.block.fluid{width:auto}.block p{margin:0;margin-bottom:6px;line-height:16px}.block code{border-radius:4px;font-size:12px;font-family:'Lucida Console',monospace;background:#eee;text-align:left;display:block;padding:4px;white-space:nowrap}#download{background:#78c9a9;display:block;text-align:center;font-weight:bold;color:#fff;padding:4px 0;font-size:14px;border-radius:4px;text-decoration:none;text-shadow:0 1px 0 rgba(0,0,0,0.2);box-shadow:0 0 0 #69b094}#download:hover{box-shadow:0 2px 0 #69b094}#download,#download:hover{transition:all .1s ease-out}#background{position:fixed;z-index:2}#background img{position:absolute;display:block} </style></head><body> <div id="content"> <div id="content-inner"> <div class="block header"> <h1 itemprop="name"><a itemprop="url" href=".">placeholder.js</a></h1> <p> placeholder.js renders image placeholders entirely in browser. </p> <p>the v1.0 size only 0.98kb, the v2.0 and above less then 2kb.</p> <p>Placeholders can have custom colors, fonts, resizing behavior.</p> <a href="https://github.com/hustcc/placeholder.js/releases" id="download" target="_blank">Download placeholder.js</a> </div> <div class="block" id="details"> <h2>Usage</h2> <p> <code> placeholder.getData(opts); </code> </p> or <p> <code> <img class="placeholder" /> </code> </p> <p> Learn more at the <a href="https://github.com/hustcc/placeholder.js">placeholder.js GitHub</a>. </p> <h2>How</h2> <p> How to use? <a href="doc/">Documents</a> / <a href="doc/demo.html">DEMO</a>. </p> </div> <div class="block" id="server_holder"> <h2>Placeholder Service</h2> <p> <code>http://placeholder.cn/{px}/{bg}/{fg}</code> </p> e.g. <p> <code>1. http://placeholder.cn/78</code> <code>2. http://placeholder.cn/50x30</code> <code>3. http://placeholder.cn/137/aaa</code> <code>4. http://placeholder.cn/256x128/194343/66ee99</code> </p> <p> Learn more at the <a target="_blank" href="https://github.com/img-src/placeholder">php-placeholder GitHub</a>. </p> </div> </div> </div> <div id="background"> </div> <!--[if lt IE 9]> <h2 class="ie">You're using an unsupported browser. <a href="http://goo.gl/OxmUO">Upgrade to IE9.</a></h2> <![endif]--> <script src="http://cdn.bootcss.com/jquery/1.11.1/jquery.min.js"></script> <script src="placeholder.min.js"></script> <script type="text/javascript"> (function() { function a(a, b, c) { return "#" + ((256 + a << 8 | b) << 8 | c).toString(16).slice(1) } function b(a, b, c) { return [a[0] * (1 - c) + b[0] * c, a[1] * (1 - c) + b[1] * c, a[2] * (1 - c) + b[2] * c] }!~navigator.platform.indexOf("Linux") || $("body").addClass("etc"); var c = 120, d = 200, e, f, g = [ [198, 247, 159], [129, 209, 142], [210, 238, 252], [26, 155, 126] ]; var opts = { size: '128x128', bgcolor: '', color: '', fsize: 20, }; for (var h = 0, i = 0; i < screen.height; h++, i += e + 2) { e = c, h == 1 ? e = 230 : h > 1 && (e = Math.floor(e * .7 + Math.random() * e * .4)); for (var j = 0, k = 0; k < screen.width; j++, k += f + 2) { f = d + Math.random() * 20 - Math.random() * 20, f = Math.floor(f * .8 + Math.random() * f * .5); var l = Math.min(1, (j + 1) / (screen.width / f)), m = Math.min(1, (h + 1) / (screen.height / e)), n = b(g[0], g[2], m), o = b(g[1], g[3], m), p = b(n, o, l); p[0] = Math.round(p[0]), p[1] = Math.round(p[1]), p[2] = Math.round(p[2]); if (h != 1) { var q = a(p[0], p[1], p[2]), r = b(p, [0, 0, 0], .2), s = a(r[0], r[1], r[2]); opts.size = f + "x" + e; opts.bgcolor = q; opts.color = s; var t = $('<img />').attr('src', placeholder.getData(opts)).css({ top: i + "px", left: k + "px" }); $("#background").append(t) } } } })() </script> <span itemprop="articleBody" style="display:none;"> <div id="english_content"> <h2>image-placeholder.js</h2> <p>A javascript library to generate <code>placeholder image</code> on client browser side</p> <h3>Feature</h3> <ul><li>Pure javascript, do not depends on jQuery or other javascript framework.</li><li>Very lite, only <code>0.98k</code>. can be smaller after gzip. After add img options, library is up to <code>1.52kb</code>.</li><li>So many option config, all has default value.</li><li>Very easy to use.</li></ul> <h3>Usage</h3> <p>Include placeholder.js in your HTML:</p> <p><code>html <script src="placeholder.js"></script> </code></p> <p><code>1.</code> Programmatic use API to process image with a specific src attribute, like this one:</p> <p><code>html <img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})"> </code></p> <p><code>2.</code> Holder will then process all images with a specific src attribute, like this one:</p> <p><code>html <img class="placeholder" /> </code></p> <p>or with options setting:</p> <p><code>html <img options="size=256x128&text=Hello!" class="placeholder" /> </code></p> <p><strong>Notice：</strong> </p> <ul><li>the attribute <code>class</code> of <code>img</code> should contain <code>placeholder</code>.</li><li>the url paramter <code>text</code> should be after <code>encodeURIComponent</code>, contains % should be <code>%25</code>, & should be <code>%26</code>, = should be <code>%3D</code>, space should be <code>%20</code>, e.g. </li></ul> <p><code>html <img options="size=256x128&text=Hello%2525%26%3DWorld" class="placeholder"> </code></p> <p>the config above will genertate image placeholder with text <code>Hello%25&=</code>.</p> <h3>Placeholder options</h3> <p>Placeholder options are set function input, e.g. <code>placeholder.getData({text: 'Image 404'})</code>, or set through URL properties e.g. <code>options="size=256x128&text=Hello!"</code></p> <ul><li><code>size</code>: The size of placeholder. Example: <code>256x128</code>, Default: <code>128x128</code>.</li><li><code>bgcolor</code>: Background color. Example: <code>#969696</code>. Default: <code>random</code>.</li><li><code>color</code>: Foreground (text) color. Example: <code>#ccc</code>. Default: <code>random</code>.</li><li><code>text</code>: Custom text. Example: <code>Hello World, 你好</code>. Default: equal to <code>size</code>.</li><li><code>fstyle</code>: Custom text font. Can be <code>normal / italic / oblique</code>. Default: <code>oblique</code>.</li><li><code>fweight</code>: Custom text weight. Can be <code>normal / bold / bolder / lighter / Number</code>. Default: <code>bold</code>.</li><li><code>fsize</code>: Custom text size. Default: <code>automation</code> calculate to avoid text overflow.</li><li><code>ffamily</code>: Custom text family. Default: <code>consolas</code>.</li></ul> <p>For Example, use as var to function input:</p> <p><code>javascript var opts = { size: '512x256', bgcolor: '#ccc', color: '#969696', text: 'Hello World, 你好', fstyle:'oblique', fweight: 'bold', fsize:'40', ffamily: 'consolas' } console.log(placeholder.getData(opts)) //get the base64 of the placeholder image. </code></p> <p>use as URL properties:</p> <p><code>html size=256x128&text=Hello!&bgcolor=#ccc&color=#969696&fstyle=oblique&fweight=bold&fsize=40&ffamily=consolas </code></p> <h3>Placeholder methods</h3> <ul><li><code>placeholder.getData(opts)</code>: Get the base64 string of placeholder image, can be used in the <code>src</code> of img, or in the background-url of css style.</li><li><code>placeholder.getCanvas(opts)</code>: Get the canvas element, can be append to DOM.</li></ul> <h3>Why another Holder?</h3> <ul><li>Image placeholder generate by server side is not my need.</li><li><a href="https://github.com/imsky/holder">imsky/holder</a> can generate on client browser side, <code>BUT</code>, the sytle is <code>holder.js/300x200</code>, so hard to use on website when need dynamic image.</li><li>Other image placeholder javascript file size is too large, such as <code>imsky/holder is 30.8 KB</code>, not suitable for website.</li></ul> </div> <div id="chinese_content"> <h2>image-placeholder.js</h2> <p>一个Javascript库，用于在浏览器端生成<code>placeholder image</code>，提供完善的配置和简单的方法。</p> <h2>特点</h2> <ol><li>不依赖任何 js 框架，比如 jq</li><li>小于 1k ，具体是<code>0.98k</code>，增加img配置方式之后，为<code>1.52kb</code></li><li>配置项多，都有默认值</li><li>使用简单</li></ol> <h3>使用</h3> <p>引入 placeholder.js 到你的前段代码中:</p> <p><code>html <script src="placeholder.js"></script> </code></p> <p><code>1.</code> 调用placeholder.js的方法进行替换，举个例子如下:</p> <p><code>html <img src="image_origin.png" onerror="this.src=placeholder.getData({text: 'Image 404'})"> </code></p> <p><code>2.</code> 使用URL参数的方式配置Img的属性options，例如：</p> <p><code>html <img class="placeholder" /> </code></p> <p>或者携带参数options:</p> <p><code>html <img options="size=256x128&text=Hello!" class="placeholder" /> </code></p> <p><strong>注意事项：</strong></p> <ul><li><code>img</code>标签的<code>class</code>属性要包含<code>placeholder</code>才会生效.</li><li>URL参数中的text值应该被<code>encodeURIComponent</code>转码，主要包括： % 为 <code>%25</code>, & 为 <code>%26</code>, = 为 <code>%3D</code>, 空格 为 <code>%20</code> e.g. </li></ul> <p><code>html <img options="size=256x128&text=Hello%2525%26%3DWorld" class="placeholder"> </code></p> <p>上面的配置会生成一个占位图，其中的文字内容为： <code>Hello%25&=</code>.</p> <h3>Placeholder 配置项</h3> <p>Placeholder 配置项用于API方法的输入参数, e.g. <code>placeholder.getData({text: 'Image 404'})</code>. 或者作为URL参数样式作为img的属性配置， e.g. <code>options="size=256x128&text=Hello!"</code></p> <ul><li><code>size</code>: placeholder图片尺寸. 例如: <code>256x128</code>, 默认: <code>128x128</code>.</li><li><code>bgcolor</code>: 背景颜色. 例如: <code>#969696</code>. 默认: <code>random</code>.</li><li><code>color</code>: 前景颜色，文字颜色. 例如: <code>#ccc</code>. 默认: <code>random</code>.</li><li><code>text</code>: 自定义文本内容. 例如: <code>Hello World, 你好</code>. 默认: equal to <code>size</code>.</li><li><code>fstyle</code>: 字体样式. 可以是 <code>normal / italic / oblique</code>. 默认: <code>oblique</code>.</li><li><code>fweight</code>: 字体weight. 可以是 <code>normal / bold / bolder / lighter / Number</code>. 默认: <code>bold</code>.</li><li><code>fsize</code>: 字体大小. 默认: <code>自动</code> 计算字体大小防止文字超出图片大小.</li><li><code>ffamily</code>: 字体. 默认: <code>consolas</code>.</li></ul> <p>具体参数配置例子:</p> <p><code>javascript var opts = { size: '512x256', bgcolor: '#ccc', color: '#969696', text: 'Hello World, 你好', fstyle:'oblique', fweight: 'bold', fsize:'40', ffamily: 'consolas' } console.log(placeholder.getData(opts)) //get the base64 of the placeholder image. </code></p> <p>作为img的options属性为：</p> <p><code>html size=256x128&text=Hello!&bgcolor=#ccc&color=#969696&fstyle=oblique&fweight=bold&fsize=40&ffamily=consolas </code></p> <h3>Placeholder 方法</h3> <ul><li><code>placeholder.getData(opts)</code>: 获得placeholder图片的base64字符串，可以直接在img标签的src属性中使用，或者在css的背景中使用。</li><li><code>placeholder.getCanvas(opts)</code>: 获得canvas元素, 可以直接插入到DOM结构中。</li></ul> <h3>为什么要造轮子</h3> <ol><li>很多 image placeholder 都是在服务端生成，需要额外搭建服务以及耗费资源。</li><li><a href="https://github.com/imsky/holder">imsky/holder</a>是客户端生成，大名鼎鼎，但是在用到网页上，动态图片的时候，它的那种风格用起来不太方便。</li><li>其他的 image placeholder 太大了，比如上面提到的 holder 压缩之后还有 30k 以上，其实<code>不太使用在网页上使用</code>。</li></ol> </div> </span> <span style="display:none"><script src="http://s4.cnzz.com/stat.php?id=1257060683&web_id=1257060683" language="JavaScript"></script></span></body></html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
