為便於理解和演示，我做了一個簡單的HTML頁面（雖然我用的是Visual Studio創建的ASP頁面，但毫不影響你在其他地方用到本次演示的代碼）。實現過程是頁面打開時默認展示一個二維碼，用戶可以更改文本內容，更改生成二維碼的參數，例如尺寸、前景色、背景色等，點擊【生成二維碼】按鈕即可在下方生成一個二維碼，用手機微信或者QQ、百度等都可以識別輸入的內容，當輸入網址時還可以直接跳轉到網站頁面。下圖為效果樣式。
var qrcode = new QRCode(DOM, { text: "http://jindo.dev.naver.com/collie", width: 128, height: 128, colorDark : "#000000", colorLight : "#ffffff", correctLevel : QRCode.CorrectLevel.H});注釋：
DOM：二維碼生成後放在該容器裡面，例如一個DIV
text：要生成二維碼的文本，可以是文字、數字、字母、網址等
width：二維碼的寬度
height：二維碼的高度
colorDark ：二維碼淺色部分顏色
colorLight:二維碼深色部分顏色
correctLevel:二維碼識別等級，共分為 L : 1, M : 0, Q : 3, H : 2等
var qrcode = new QRCode(document.getElementById('qrcode'), { text: document.getElementById('nr').value, width: document.getElementById('cc').value, height: document.getElementById('cc').value, colorDark: document.getElementById('bjs').value, colorLight: document.getElementById('qjs').value, correctLevel: QRCode.CorrectLevel.L });<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="createQRCode.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>生成二維碼演示案例</title></head><body> <h1>生成二維碼演示案例</h1> <hr /> <div id="Text"> <textarea name="reworkmes" maxlength="300" id="nr">請輸入內容！</textarea> </div> <table> <tr> <td class="title">尺寸：</td> <td> <select id="cc" class="texts"> <option value="100">100×100px</option> <option value="200">200×200px</option> <option value="400">400×400px</option> <option value="600">600×600px</option> <option value="800">800×800px</option> <option value="1000">1000×1000px</option> </select> </td> <td></td> <td class="title">前景色：</td> <td> <input id="bjs" class="texts" type="text" value="#000000" /></td> <td></td> <td class="title">背景色：</td> <td> <input id="qjs" class="texts" type="text" value="#ffffff" /></td> </tr> <tr style="height: 35px;"> <td colspan="8" style="text-align: right;"> <input id="createQR" type="button" value="生 成 二 維 碼" /> </td> </tr> </table> <div id="qrcode"></div></body></html>樣式代碼：
<style type="text/css"> h1 { text-align: center; }
hr { width: 60%; text-align: center; }
#Text { text-align: center; }
#nr { resize: none; width: 35%; height: 190px; padding-bottom: 0px; }
table { margin: 20px auto; }
td { width: 30px; }
.texts { width: 100px; }
.title { text-align: right; width: 70px; }
#qrcode { display: table-cell; text-align: center; }</style>JavaScript代碼：
<script type="text/javascript"> $().ready(function () { createQR(); }) function createQR() { document.getElementById('qrcode').innerHTML = ""; var qrcode = new QRCode(document.getElementById('qrcode'), { text: document.getElementById('nr').value, width: document.getElementById('cc').value, height: document.getElementById('cc').value, colorDark: document.getElementById('bjs').value, colorLight: document.getElementById('qjs').value, correctLevel: QRCode.CorrectLevel.L }); $('img').css({ "margin-left": -document.getElementById('cc').value / 2, "position": "absolute", "left": "50%" }); } $(document).on('click', '#createQR', function () { createQR(); })</script>外部代碼引用：
<script src="qrcode.min.js"></script><script src="jquery.min.js"></script>完整代碼內容：以下代碼為完整的ASP.Net頁面代碼內容，對以上組合還出現問題的話，可以直接拷貝下面代碼進入頁面。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Index.aspx.cs" Inherits="createQRCode.Index" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>生成二維碼演示案例</title> <style type="text/css"> h1 { text-align: center; }
hr { width: 60%; text-align: center; }
#Text { text-align: center; }
#nr { resize: none; width: 35%; height: 190px; padding-bottom: 0px; }
table { margin: 20px auto; }
td { width: 30px; }
.texts { width: 100px; }
.title { text-align: right; width: 70px; }
#qrcode { display: table-cell; text-align: center; }</style></head><body> <h1>生成二維碼演示案例</h1> <hr /> <div id="Text"> <textarea name="reworkmes" maxlength="300" id="nr">請輸入內容！</textarea> </div> <table> <tr> <td class="title">尺寸：</td> <td> <select id="cc" class="texts"> <option value="100">100×100px</option> <option value="200">200×200px</option> <option value="400">400×400px</option> <option value="600">600×600px</option> <option value="800">800×800px</option> <option value="1000">1000×1000px</option> </select> </td> <td></td> <td class="title">前景色：</td> <td> <input id="bjs" class="texts" type="text" value="#000000" /></td> <td></td> <td class="title">背景色：</td> <td> <input id="qjs" class="texts" type="text" value="#ffffff" /></td> </tr> <tr style="height: 35px;"> <td colspan="8" style="text-align: right;"> <input id="createQR" type="button" value="生 成 二 維 碼" /> </td> </tr> </table> <div id="qrcode"></div></body></html><script src="qrcode.min.js"></script><script src="jquery.min.js"></script><script type="text/javascript"> $().ready(function () { createQR(); }) function createQR() { document.getElementById('qrcode').innerHTML = ""; var qrcode = new QRCode(document.getElementById('qrcode'), { text: document.getElementById('nr').value, width: document.getElementById('cc').value, height: document.getElementById('cc').value, colorDark: document.getElementById('bjs').value, colorLight: document.getElementById('qjs').value, correctLevel: QRCode.CorrectLevel.L }); $('img').css({ "margin-left": -document.getElementById('cc').value / 2, "position": "absolute", "left": "50%" }); } $(document).on('click', '#createQR', function () { createQR(); })</script>當二維碼模糊或部分被遮擋模糊時需要設計到二維碼的識別糾錯等級，主要有correctLevel屬性決定二維碼的識別糾錯能力大小。高識別等級的二維碼可以識別更模糊的圖案，但底識別等級的二維碼能夠存儲更多的容量，所以，在不追求識別等級的情況下建議使用低等級識別度的二維碼，這樣生成的二維碼將會更加的簡潔，存儲更多的內容。見下表：
編碼模式L（低級）M（中級）Q（四分之一）H（高級）數字7089559639933057數字+字母4296339124201852位元組2953233116631273漢字181714351024784若要獲取二維碼的圖片，可以先獲取其URL路徑，而後將URL賦值給img或者直接下載圖片到本地。案例如下：
var canvas = qrcode.find('canvas').get(0); var URLdata = canvas.toDataURL('image/jpg');