.Net MVC生成二维码并前端展示

简介：

二维码又称二维条码，常见的二维码为qr code，qr全称quick response，是一个近几年来移动设备上超流行的一种编码方式，它比传统的bar code条形码能存更多的信息，也能表示更多的数据类型。

步骤说明：

第一步要做的就是添加对 thoughtworks.qrcode 的引用。添加引用步骤：右键引用——》管理 nuget 程序包——》浏览中搜索 qrcode ——》安装 thoughtworks.qrcode 程序包

下文为controller控制器的后端代码，输入所需展示的内容并返回一个base64的字符串用于前端内容展示...

 1 [httppost]
 2         /// <summary> 
 3         /// 生成二维码 
 4         /// </summary> 
 5         /// <param name="qrcodecontent">要编码的内容</param> 
 6         /// <returns>返回二维码base64用于前端展示</returns> 
 7         public string qrcodeencoderutil(string qrcodecontent)
 8         {
 9             qrcodeencoder qrcodeencoder = new qrcodeencoder();
10             qrcodeencoder.qrcodescale = 5;
11             qrcodeencoder.qrcodeversion = 0;
12             bitmap img = qrcodeencoder.encode(qrcodecontent, encoding.utf8);//指定utf-8编码， 支持中文 
13             string strbaser64 = "";
14             try
15             {
16                 using (memorystream ms = new memorystream())
17                 {
18                     img.save(ms, system.drawing.imaging.imageformat.jpeg);
19                     byte[] arr = new byte[ms.length];
20                     ms.position = 0;
21                     ms.read(arr, 0, (int)ms.length);
22                     ms.close();
23                     strbaser64 = convert.tobase64string(arr);
24                 }
25                 return strbaser64;
26             }
27             catch (exception)
28             {
29                 throw new exception("something wrong during convert!");
30             }
31         }

下文为web视图的前端代码，因只是一个功能示例，未对样式进行调整...

 1 <script src="~/scripts/jquery-1.10.2.min.js"></script>
 2 
 3 <div>
 4     <div><span>生成内容:</span><input placeholder="请输入需要生成的文字描述..." id="ewmtext" /></div>
 5     <button onclick="geterweima()">
 6         生成二维码
 7     </button>
 8     <img id="erweimaimg" style="width:120px;height:120px">
 9 </div>
10 
11 <script>
12     function geterweima() {
13         $.post("/index/qrcodeencoderutil?qrcodecontent=" + encodeuricomponent($("#ewmtext").val()), function (data) {
14             if (data != "") {
15                 $("#erweimaimg").attr("src", "data:image/jgp;base64," + data)
16             }
17             else {
18                 alert("生成失败");
19             }
20         })
21     }
22 </script>

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