<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>