.Net MVC生成二維碼並前端展示

簡介：

二維碼又稱二維條碼，常見的二維碼為QR Code，QR全稱Quick Response，是一個近幾年來移動設備上超流行的一種編碼方式，它比傳統的Bar Code條形碼能存更多的信息，也能表示更多的數據類型。

步驟說明：

第一步要做的就是添加對 ThoughtWorks.QRCode 的引用。添加引用步驟：右鍵引用——》管理 NuGet 程序包——》瀏覽中搜索 QRCode ——》安裝 ThoughtWorks.QRCode 程序包

下文為Controller控制器的后端代碼，輸入所需展示的內容並返回一個base64的字符串用於前端內容展示...

[HttpPost]
        /// <summary> 
        /// 生成二維碼 
        /// </summary> 
        /// <param name="qrCodeContent">要編碼的內容</param> 
        /// <returns>返回二維碼base64用於前端展示</returns> 
        public string QRCodeEncoderUtil(string qrCodeContent)
        {
            QRCodeEncoder qrCodeEncoder = new QRCodeEncoder();
            qrCodeEncoder.QRCodeScale = 5;
            qrCodeEncoder.QRCodeVersion = 0;
            Bitmap img = qrCodeEncoder.Encode(qrCodeContent, Encoding.UTF8);//指定utf-8編碼， 支持中文 
            string strbaser64 = "";
            try
            {
                using (MemoryStream ms = new MemoryStream())
                {
                    img.Save(ms, System.Drawing.Imaging.ImageFormat.Jpeg);
                    byte[] arr = new byte[ms.Length];
                    ms.Position = 0;
                    ms.Read(arr, 0, (int)ms.Length);
                    ms.Close();
                    strbaser64 = Convert.ToBase64String(arr);
                }
                return strbaser64;
            }
            catch (Exception)
            {
                throw new Exception("Something wrong during convert!");
            }
        }

下文為Web視圖的前端代碼，因只是一個功能示例，未對樣式進行調整...

<script src="~/Scripts/jquery-1.10.2.min.js"></script>

<div>
    <div><span>生成內容:</span><input placeholder="請輸入需要生成的文字描述..." id="EwmText" /></div>
    <button onclick="GetErWeiMa()">
        生成二維碼
    </button>
    <img id="ErWeiMaImg" style="width:120px;height:120px">
</div>

<script>
    function GetErWeiMa() {
        $.post("/Index/QRCodeEncoderUtil?qrCodeContent=" + encodeURIComponent($("#EwmText").val()), function (data) {
            if (data != "") {
                $("#ErWeiMaImg").attr("src", "data:image/jgp;base64," + data)
            }
            else {
                alert("生成失敗");
            }
        })
    }
</script>

如果您已經按照要求完成代碼，則會出現下圖效果，輸入所需生成內容，前端會展示對應的二維碼。注意input輸入的內容需要encodeURIComponent，否則會截斷特殊字符...