.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 = ;
             qrCodeEncoder.QRCodeVersion = ;
             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 = ;
                     ms.Read(arr, , (int)ms.Length);
                     ms.Close();
                     strbaser64 = Convert.ToBase64String(arr);
                 }
                 return strbaser64;
             }
             catch (Exception)
             {
                 throw new Exception("Something wrong during convert!");
             }
         }

Controller内容

下文为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>

View代码

如果您已经按照要求完成代码，则会出现下图效果，输入所需生成内容，前端会展示对应的二维码。注意input输入的内容需要encodeURIComponent，否则会截断特殊字符...