二维码生成器文档
DemetraGowl
8年前
<p>纯纯的Javascript版，不依赖任何第三方包（不依赖jQuery喔~），就可以轻松地生成二维码了，支持各种自定义，可以通过自定义颜色生成各种漂亮的、有个性的二维码。本站已支持使用此功能获取每个页面的二维码。</p> <p>仅需要浏览器支持 <code>canvas</code> ，几乎所有现代浏览器都是支持的（而且本网站也仅支持现代浏览器）。</p> <p>快来试试吧！</p> <p><a href="/misc/goto?guid=4959671025413589096">点此测试</a></p> <p>安装 </p> <pre> <code class="language-haskell"># Via NPM $ npm install jsqrgen # Via bower $ bower install jsqrgen </code></pre> <p>也可以直接下载 <code>dist/qrgen.min.js</code> 。</p> <p>浏览器兼容</p> <table border="1"> <tbody> <tr> <td>Firefox</td> <td>Yes</td> </tr> <tr> <td>Chrome</td> <td>Yes</td> </tr> <tr> <td>Internet Explorer</td> <td>9+</td> </tr> <tr> <td>Opera</td> <td>12 <a href="/misc/goto?guid=4959671025510826713" id="id4">[1]</a> , 15+</td> </tr> <tr> <td>Safari</td> <td>Yes</td> </tr> </tbody> </table> <table id="id5"> <tbody> <tr> <td><a href="/misc/goto?guid=4959671025592127833">[1]</a></td> <td>Opera 12 (Presto) 的 <code>canvas.arcTo</code> 有问题，因此特效可能会不正常。</td> </tr> </tbody> </table> <p>函数和方法</p> <p>支持UMD加载，得到的对象（如全局对象 <code>qrgen</code> ）有以下方法：</p> <ul> <li> <p><em>function</em> qrgen.canvas( <em>options</em> )</p> <p>生成一个二维码并画到 <em>canvas</em> 上。其中 <em>options</em> 是一个 <em>object</em> ，可以有以下属性（均可选）：</p> <table border="1"> <thead> <tr> <th>属性</th> <th>类型</th> <th>默认值</th> <th>描述</th> </tr> </thead> <tbody> <tr> <td><code>data</code></td> <td>String</td> <td>''</td> <td>用于生成二维码的原始数据，字符串将使用UTF-8编码。</td> </tr> <tr> <td><code>cellSize</code> <a href="/misc/goto?guid=4959671025681925620" id="id7">[2]</a></td> <td>Number</td> <td>2</td> <td>每个小格的像素宽度或高度。</td> </tr> <tr> <td><code>size</code> <a href="/misc/goto?guid=4959671025681925620" id="id8">[2]</a></td> <td>Number</td> <td>None</td> <td>最终生成的图片的像素宽度或高度，如果指定了 <em>cellSize</em> 那么此项被忽略。</td> </tr> <tr> <td><code>typeNumber</code></td> <td>Number [1..40]</td> <td>Auto</td> <td>二维码的 <em>typeNumber</em> ，如果太小将自动增加直到找到一个合适的 <em>typeNumber</em> 。</td> </tr> <tr> <td><code>correctLevel</code></td> <td>String {'L', 'M', 'Q', 'H'}</td> <td>'M'</td> <td>二维码的容错级别，如果指定了 <code>logo</code> 则设置为 <code>H</code> 。</td> </tr> <tr> <td><code>colorDark</code> <a href="/misc/goto?guid=4959671025775184847" id="id9">[3]</a></td> <td>Image | Canvas | String | Array</td> <td>'black'</td> <td>暗格的背景色。</td> </tr> <tr> <td><code>colorLight</code> <a href="/misc/goto?guid=4959671025775184847" id="id10">[3]</a></td> <td>Image | Canvas | String | Array</td> <td>'white'</td> <td>亮格的背景色。</td> </tr> <tr> <td><code>logo</code></td> <td>Object</td> <td>{}</td> <td> <p>可以有以下属性（均可选）：</p> <p>若logo是图片：</p> <ul> <li><code>image</code> ：一个 <code>Image</code> 元素，用于传递将要画到二维码中的图片。</li> </ul> <p>若logo是文本：</p> <ul> <li><code>text</code> ：将要画成Logo的文本。</li> <li><code>color</code> ：Logo文本的颜色，默认是 <code>black</code> 。</li> <li><code>fontStyle</code> ：Logo文本的样式，如 <code>italic bold</code> 。</li> <li><code>fontFace</code> ：Logo文本的字体，默认是 <code>Cursive</code> 。</li> </ul> <p>共同属性：</p> <ul> <li><code>clearEdges</code> ：一个Number，指定Logo周围被破坏的小格的清理级别，默认为 <code>0</code> 。</li> <li><code>margin</code> ：图片及周围小格之间的像素间距，默认为 <code>2</code> 。</li> <li><code>size</code> ：一个float，表示Logo占二维码总面积的比例，默认是 <code>.15</code> （建议使用）。</li> </ul> </td> </tr> <tr> <td><code>effect</code></td> <td>Object</td> <td>{}</td> <td> <p>可以有 <code>key</code> 和 <code>value</code> 属性。</p> <ul> <li> <p><code>effect.key = 'round'</code></p> <p><code>effect.value</code> 在0-0.5之间，使小格有一个 <code>value</code> * <code>cellSize</code> 的 <code>border-radius</code> 。</p> </li> <li> <p><code>effect.key = 'liquid'</code></p> <p><code>effect.value</code> 在0-0.5之间，液态效果，即相邻的小格之间互相融合。</p> </li> </ul> </td> </tr> <tr> <td><code>reuseCanvas</code></td> <td>Canvas</td> <td>None</td> <td>如果设置了 <code>reuseCanvas</code> ，最终的图片将绘制到这个canvas上。</td> </tr> <tr> <td><code>noAlpha</code></td> <td>Boolean</td> <td>true</td> <td>是否去除图片的alpha通道。</td> </tr> </tbody> </table> </li> </ul> <p><strong>返回</strong> 一个canvas。</p> <table id="size"> <tbody> <tr> <td>[2]</td> <td><em>(<a href="/misc/goto?guid=4959671025870488572">1</a>, <a href="/misc/goto?guid=4959671025956250613">2</a>)</em> 建议使用 <code>cellSize</code> 而非 <code>size</code> ，因为当计算出的 <code>cellSize</code> 不是整数时，最后的图像可能因为被拉伸而变模糊。</td> </tr> </tbody> </table> <table id="color"> <tbody> <tr> <td>[3]</td> <td><em>(<a href="/misc/goto?guid=4959671026035133158">1</a>, <a href="/misc/goto?guid=4959671026125319722">2</a>)</em> <p><code>colorDark</code> 和 <code>colorLight</code> 都可以是一个图片（Image或者Canvas）、一个代表CSS颜色的字符串或者一个数组，数组中的元素可以有以下属性：</p> <table border="1"> <tbody> <tr> <td>属性</td> <td>类型</td> <td>默认值</td> <td>描述</td> </tr> <tr> <td><code>col</code></td> <td>Number</td> <td>使用 <code>x</code></td> <td>起始列的index</td> </tr> <tr> <td><code>row</code></td> <td>Number</td> <td>使用 <code>y</code></td> <td>起始行的index</td> </tr> <tr> <td><code>cols</code></td> <td>Number</td> <td>使用 <code>width</code></td> <td>应用当前样式的列数</td> </tr> <tr> <td><code>rows</code></td> <td>Number</td> <td>使用 <code>height</code></td> <td>应用当前样式的行数</td> </tr> <tr> <td><code>x</code></td> <td>Number</td> <td>0</td> <td>起始位置的X</td> </tr> <tr> <td><code>y</code></td> <td>Number</td> <td>0</td> <td>起始位置的Y</td> </tr> <tr> <td><code>width</code></td> <td>Number</td> <td>画布宽度</td> <td>应用当前样式的宽度</td> </tr> <tr> <td><code>height</code></td> <td>Number</td> <td>画布高度</td> <td>应用当前样式的高度</td> </tr> <tr> <td><code>style</code></td> <td>String</td> <td>'black'</td> <td>通过其他属性指定的区域将要应用的CSS填充样式</td> </tr> </tbody> </table> </td> </tr> </tbody> </table>