jQuery.qrcode二維碼插件生成網(wǎng)頁(yè)二維碼

//第二個(gè) var url2 = 'http://caibaojian.com'; $('#canvas').qrcode({ size:200, fill: '#1C1C1C', text: url2, ecLevel:'H',//誤差校正水平選擇最高級 mode:2,//label模式選擇2 label: 'caibaojian.com', fontname: 'Arial', fontcolor: '#458fd2' });

原文地址：

如果是一個(gè)固定的二維碼，我們只需要在網(wǎng)上找個(gè)地方生成圖片，然后放上圖片就可以了。但如果是地址不固定需要根據頁(yè)面來(lái)生成的話(huà)。就有兩種做法，一個(gè)是后端根據頁(yè)面做一個(gè)動(dòng)態(tài)的二維碼。一種是前端使用插件生成。

1.假如我要生成本頁(yè)的二維碼，支持IE瀏覽器，二維碼大小為200x200.背景為白色，圖像顏色為#1C1C1C，則可以使用這個(gè)代碼：

$(selector).qrcode(options);

將一個(gè)新生成的HTML元素添加到所選元素的QR代碼中。如果所選元素已是畫(huà)布元素，那么QR代碼將繪制到它上面。

####如何使用

var url = window.location.href || 'http://caibaojian.com'; $('#wx_qrcode').qrcode({ size:200, render: "div", fill: '#1C1C1C', text: url });

2.假如我要生成跟開(kāi)始給的演示中一樣的二維碼，那我只能選擇canvas或者image了。

####選項

{ // 渲染方式: 'canvas', 'image' or 'div' render: 'canvas', // 版本范圍在 1 .. 40 minVersion: 1, maxVersion: 40, // 誤差校正水平: 'L', 'M', 'Q' or 'H' ecLevel: 'L', // 如果繪制到現有畫(huà)布上的像素偏移 left: 0, top: 0, // 尺寸(使用像素) size: 200, // 代碼顏色或圖像元素 fill: '#000', // 背景顏色或圖像元素，null則代表透明背景 background: null, // 內容 text: 'no text', // 相對于模塊寬度的角半徑: 0.0 .. 0.5 radius: 0, // 模塊中安靜的區域 quiet: 0, // 模式 // 0: normal // 1: label strip // 2: label box // 3: image strip // 4: image box mode: 0, mSize: 0.1, mPosX: 0.5, mPosY: 0.5, label: 'no label', fontname: 'sans', fontcolor: '#000', image: null }

####實(shí)例：

本文推薦的是一個(gè)jQuery二維碼插件，它可以根據你設定的地址來(lái)生成一個(gè)二維碼，二維碼可以有div格式的，也有Canvas格式的。canvas的支持自定義logo和文字在上面。