如何将网址或者文字转化成二维码

浏览:1453 发布日期:2016/12/02 分类:javascript 关键字:

    随着微信的迅速发展,二维码在智能手机上使用也越来越多了利用手机的拍照功能,再加上一些QR码识别软件,可以通过二维码来记录一些比较枯燥并不好记的信息,比如说长长的网址。现在很多手机软件下载网站都提供了可视化的下载路径,就是将下载路径做成QR码,让手机用户快速读取QR码中的下载链接转到下载页面。

怎么来生成二维码呢?现在来说,最简单直接的生成QR码的方法就是通过Google Chart API来实现。先给出个实例,就拿最上面曾列出来那个说吧:

https://chart.googleapis.com/chart?cht=qr&chs=200x200&choe=UTF-8&chld=L|4&chl=http://maotouying.org

上面看到的链接已经是一个二维码了,

我们来分析一下这个链接中的参数:


  1. 1.https://chart.googleapis.com/chart? 这是Google Chart API的头部,直接照抄就好了

  2. 2.&cht=qr 这是说图表类型为qr也就是二维码。

  3. 3.&chs=200×200 这是说生成图片尺寸为200×200,是宽x高。这并不是生成图片的真实尺寸,应该是最大尺寸吧。

  4. 4.&choe=UTF-8 这是说内容的编码格式为UTF-8,此值默认为UTF-8.其他的编码格式请参考Google API文档

  5. 5.&chld=L|4 L代表默认纠错水平; 4代表二维码边界空白大小,可自行调节。具体参数请参考Google API文档

  6. 6.&chl=XXXX 这是QR内容,也就是解码后看到的信息。包含中文时请使用UTF-8编码汉字,否则将出现问题。


  1. 下面实例:

  2. 这是本文的网页二维码。不信你手机扫描试试!!

  3. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">    
    <html xmlns="http://www.w3.org/1999/xhtml">    
    <head>    
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />    
    <meta name="description" content="一个简单的二维码生成器的实现">    
    <meta name="keywords" content="二维码, 二维码生成器, QR, Google Chart, Codeup.org, Codeup">    
    <title>QR二维码生成器</title>    
    <style type="text/css">    
    td{    
    	text-align:left;    
    	white-space:nowrap;    
    	overflow: hidden;    
    }    
    #ToolBar {    
    	position:absolute;    
    	bottom:0px;    
    	right:16px;    
    	width:100%;    
    	height:20px;    
    	text-align:center;    
    	background:#ccc;    
    	z-index:2;    
    	overflow:hidden;    
    }    
    </style>    
    <script language="javascript" type="text/javascript">     
    var googleapihead = "https://chart.googleapis.com/chart?"    
    var sp = "&";    
    var cht = "qr";    
    var chs = "200x200";    
    var chld = "L|4";    
    var choe = "UTF-8";    
    var chl = document.location.href;    
    //var chl = "王芾";    
    var defaulturl = googleapihead + "cht=" + cht +    
    					sp + "chs=" + chs +    
    					sp + "choe="+ choe +    
    					sp + "chld=" + chld +    
    					sp + "chl=" + chl;    
    function GetURL(){    
    	var url = "";    
    	url += googleapihead;    
    	url += "cht=" + cht;    
    	url += sp + "chs=" + document.formAction.size.value;    
    	url += sp + "choe=" + document.formAction.choe.value;    
    	url += sp + "chld=" + document.formAction.chld.value;    
    	url += sp + "chl=" + encodeURI(document.formAction.content.value);    
    	return url;    
    }    
    function CreateQR(){    
    	var url = GetURL();    
    	document.formAction.imgqr.src = url;    
    	document.formAction.url.value = url;    
    }    
    window.onload=function() {    
    	CreateQR();    
    }    
    </script>    
    </head>    
    <body>    
    <div align="center" width=100%>    
    <form name="formAction">    
    <table>    
    	<tr>    
    		<td align="center">    
    			<table    >    
    				<tr>    
    					<td><b>尺寸:<b></td>    
    					<td>    
    						<script language="JavaScript">    
    							document.write("<input type=\"text\" name=\"size\" value="+ chs + ">");    
    						</script>    
    						宽 x 高    
    					</td>    
    				</tr>    
    				<tr>    
    					<td><b>编码:</b></td>    
    					<td>    
    						<script language="JavaScript">    
    							document.write('<select name="choe" id="select">'    
    												+ '<option value="UTF-8">UTF-8</option>'    
    												+ '<option value="Shift_JIS">Shift_JIS</option>'    
    												+ '<option value="ISO-8859-1">ISO-8859-1</option>'    
    											+ '</select>'    
    											)    
    						</script>    
    					</td>    
    				</tr>    
    				<tr>    
    					<td><b>其他:</b></td>    
    					<td>    
    						<script language="JavaScript">    
    							document.write("<input type=\"text\" name=\"chld\" value="+ chld + ">");    
    						</script>    
    					</td>    
    				</tr>    
    				<tr>    
    					<td><b>内容:</b></td>    
    					<td>    
    						<script language="JavaScript">    
    							document.write('<textarea name="content"cols="50" rows="20" id="in">'+chl+'</textarea>');    
    						</script>    
    					</td>    
    				</tr>    
    			</table>    
    		</td>    
    		<td>    
    			<table>    
    				<tr align="center">    
    					<td align="center" style="text-align:center">    
    						<script language="JavaScript">    
    							document.write('<img name="imgqr" src=' + GetURL() +'/>');    
    						</script><br>    
    						生成图    
    					</td>    
    				</tr>    
    				<tr align="bottom">    
    					<td align="bottom" style="text-align:center">    
    						<script language="JavaScript">    
    							document.write('<textarea name="url"cols="45" rows="5" >'+ GetURL() +'</textarea>');    
    						</script><br>    
    						图片路径    
    					</td>    
    				</tr>    
    			</table>    
    		</td>    
    	</tr>    
    	<tr>    
    		<td colspan="3" align="center" style="text-align:center">    
    			<br>    
    			<input type="button" name="Create" value="生成QR码" onclick="CreateQR()"/>    
    		</td>    
    	</tr>    
    </table>    
    </form>    
    </div>    
    <div id="ToolBar">    
    二维码生成器(CreateQR) v0.1    
    powered by <a href="http://code.google.com/apis/chart/image">Google Chart API</a> & <a href="http://codeup.org">Codeup.org</a>    
    </div>    
    </body>    
    </html>

前端开发QQ群:577185192

1476844455471.png


评论(11 相关
一嗨租车:http://yuansaibi.com
好文,我喜欢!收藏了!
我也正想弄网址二维码
回复 小恒 2017-04-06
成人用品 无人售货机加盟 http:www.makingh.com
回复 手机贷 2017-05-16
很好很好。
回复 立刻贷 2017-05-28
立刻贷: http://www.gbele.com 为您精心挑选正规网贷平台和手机贷款
回复 聚币网 2018-02-03
生成图片尺寸为200×200
文章不错非常喜欢
回复 武胜 2018-04-18
文章很好值得一看。
这篇文章写得很好。
回复 bt110 2018-05-24
谢谢博主热心的分享好东西,支持下,欢迎回访下我的网站,看能不能交换下友链
回复 头条 2018-08-16
文章不错非常喜欢

发表评论

必填

选填

选填