一、简述：
本着做手机端的二维码保存到本地的效果，但是没办法实现。只能在PC端实现，干脆写了下来，以便日后使用。
使用了html5的canvas标签，动态创建二维码，可以自己输入url，二维码的尺寸，然后生成自己的二维码。需要使用支持html5的浏览器方可。
效果图如下：
二、实例代码
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>二维码生成器并下载-幸凡学习网</title>
<style type="text/css">
*{margin:0;padding:0;}
.txt{border-bottom:1px solid #e6e6e6;background:#f1f1f1;line-height:50px;font-size:14px;}
.content{padding:0 100px;font-size:14px;color:#666;}
.mt20{margin-top:20px}
.txt input{vertical-align:middle;height:28px;line-height:28px;margin:0 10px;}
input#qrvalue{color:#666;border:1px solid #999;width:300px;padding:0 10px;margin:10px;}
input#qrsize{width:60px;text-align:center;}
input#creat{background:#666;color:#fff;border:none;padding:0 30px;height:30px;line-height:30px;}
a.download{width:100px;text-align:center;display:block;color:#333;text-decoration:none;background:#efefef;border:1px solid #ccc;height:30px;line-height:30px;}
</style>
</head>
<body>
<div class="txt"><p class="content">请输入要生成的链接：<input type="text" id="qrvalue" value="http://www.86y.org" />生成尺寸：<input type="text" id="qrsize" value="100" />(宽或高)<input type="button" value="生成" id="creat" onclick="creatqr()" /></p></div>
<div id="qrcodess" class="content mt20"></div>
<div class="content mt20"><a href="javascript:;" class="download">下载二维码</a></div>
<script type="text/javascript" src="//apps.bdimg.com/libs/jquery/1.11.3/jquery.min.js"></script>
<script type="text/javascript" src="//cdn.bootcss.com/jquery.qrcode/1.0/jquery.qrcode.min.js"></script>
<script type="text/javascript">
function creatqr() {
var qrtxt = $("#qrvalue").val();
var srsize = $("#qrsize").val();
$("#qrcodess").html("");
$('#qrcodess').qrcode({ width: srsize, height: srsize, text: qrtxt });
}
function exportCanvasAsPNG(canvas, fileName) {
var MIME_TYPE = "image/png";
var dlLink = document.createElement('a');
dlLink.download = fileName;
dlLink.href = canvas.toDataURL("image/png");
dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.href].join(':');
document.body.appendChild(dlLink);
dlLink.click();
document.body.removeChild(dlLink);
}
$(function () {
creatqr();
$(".download").click(function () {
exportCanvasAsPNG($("#qrcodess").find("canvas")[0], "qrcoder.png");
});
});
</script>
</body>
</html>
更新一段.net下载图片的代码，也是支持PC端
using System;
using System.Collections.Generic;
using System.Drawing.Imaging;
using System.IO;
using System.Linq;
using System.Net;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
public partial class save_index : System.Web.UI.Page
{
protected void Page_Load(object sender, EventArgs e)
{
string imgUrl = "http://imgwx1.2345.com/dypcimg/img/e/44/sup132297.jpg";
WebClient my = new WebClient();
byte[] mybyte;
mybyte = my.DownloadData(imgUrl);
MemoryStream ms = new MemoryStream(mybyte);
System.Drawing.Image img;
img = System.Drawing.Image.FromStream(ms);
string filepath = Server.MapPath("/upload/") + imgUrl.Substring(imgUrl.LastIndexOf('/') + 1);
if (File.Exists(filepath)) File.Delete(filepath);
img.Save(filepath, ImageFormat.Exif); //保存 ImageFormat.Exif:自动获取文件格式
//下面直接输出
Response.ClearContent();
Response.AddHeader("Content-Disposition","attachment;filename="+imgUrl.Substring(imgUrl.LastIndexOf('/') + 1));
Response.ContentType = "image/" + ImageFormat.Exif;
Response.BinaryWrite(mybyte);
File.Delete(filepath);
}
}
三、结语
实例全用网络CDN资源，大家可以在线运行也可以查看浏览地址：http://www.86y.org/DEMO/qrcode/
(完)