生成二維碼方法匯總
隨著網(wǎng)絡(luò)的迅速發(fā)展 發(fā)展 發(fā)展，二維碼的應(yīng)用將會(huì)越來(lái)越多。同時(shí)很多只是很平凡的二維碼，請(qǐng)拿起你的手 把這個(gè)二維碼 設(shè)計(jì)起來(lái)吧。下面分享了幾個(gè)非常好的二維碼設(shè)計(jì)。
二維碼原理：
二維條碼/二維碼可以分為堆疊式/行排式二維條碼和矩陣式二維條碼。 堆疊式/行排式二維條碼形態(tài)上是由多行短截的一維5條碼堆疊而成；矩陣式二維條碼以矩陣的形式組成，在矩陣相應(yīng)元素位置上用“點(diǎn)”表示二進(jìn)制“1”， 用“空”表示二進(jìn)制“0”，“點(diǎn)”和“空”的排列組成代碼。
最近對(duì)二維碼產(chǎn)生了興趣 研究了一下二維碼 這里生出的術(shù)語(yǔ) qrcode 容錯(cuò)性較高。
數(shù)據(jù)表示方法
深色模塊表示二進(jìn)制“1”，淺色模塊表示二進(jìn)制“0”。
糾錯(cuò)能力
· L級(jí)：約可糾錯(cuò)7%的數(shù)據(jù)碼字
· M級(jí)：約可糾錯(cuò)15%的數(shù)據(jù)碼字
· Q級(jí)：約可糾錯(cuò)25%的數(shù)據(jù)碼字
· H級(jí)：約可糾錯(cuò)30%的數(shù)據(jù)碼字
上面的設(shè)計(jì) 就很完美的利用了 qrcode的容錯(cuò)性，非常nice 也非常有創(chuàng)意?。?br />
1.google 接口
<?php
$urlToEncode="要生成二維碼的網(wǎng)址
generateQRfromGoogle($urlToEncode);
function generateQRfromGoogle($chl,$widhtHeight ='150',$EC_level='L',$margin='0')
{
$url = urlencode($url);
echo '<img src=" }
?>
2..js代碼 轉(zhuǎn)換為 canvas （重點(diǎn)）
demo: http://hxend.com/jsqrcode/test/
<script type="text/javascript" src=">
<div id=qrcode></div>
<script type="text/javascript">
qrcode(document.getElementById('qrcode'),{
data:'http://geraldl.net'
});
</script>
3. 圖片接口
4.demo 里面http://hxend.com/jsqrcode/test/ 代碼
<!doctype html>
<html>
<head>
<title>QRCode</title>
<script type="text/javascript" src=">
<script type="text/javascript" src=">
</head>
<body>
<div>
<h1>二維碼生成</h1>
<div>
圖片: <img id=qrimg src=http://chabaoo.cn/uploadfile/2014/1219/20141219081025437.png>
<label><input id=qrclearedges type=checkbox checked>清理邊緣</label>
</div>
<div><input id=fimg type=file></div>
<div>文本: <textarea id=qrtext>http://www.btgoogle.com</textarea></div>
<div>大小: <input id=cellSize type=range min=2 max=10 value=6></div>
<table>
<tr>
<td rowspan=2>效果:</td>
<td colspan=3><input id=cellEffect type=range min=-50 max=50 step=5 value=0></td>
</tr>
<tr id=cellEffectStops>
<td align=left><a href=# data=l>液體</a></td>
<td align=center><a href=# data=s>方塊</a></td>
<td align=right><a href=# data=r>圓</a></td>
</tr>
</table>
<div>
Foreground color: <input id=colorFore type=color value=#4169e1>
Background color: <input id=colorBack type=color value=#ffffff><br>
Outside-border color: <input id=colorOut type=color value=#cd5c5c>
Inside-border color: <input id=colorIn type=color value=#191970>
</div>
<button id=qrgen>生成</button>
</div>
<div id=qrcode></div>
<script src=">
</body>
以上4種方法，第3種最簡(jiǎn)單，第二種是我推薦的，自由度大些，小伙伴根據(jù)自己的需求來(lái)選擇吧
相關(guān)文章
本文主要介紹了JavaScript中setTimeout()的具體用法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
JavaScript 一行代碼,輕松搞定浮動(dòng)快捷留言-V2升級(jí)版
前天熬了大半宿發(fā)了一篇[一行代碼輕松搞定快捷留言功能]，同時(shí)發(fā)布了V1.0beta版的快捷留言功能和源代碼，之所以是beta版，就是當(dāng)時(shí)感覺(jué)雖然基本功能有了，但是還不夠完善，特性也不一定合理2010-04-04
關(guān)于使用runtimeStyle屬性問(wèn)題討論文章
關(guān)于使用runtimeStyle屬性問(wèn)題討論文章...2007-03-03
這篇文章主要為大家詳細(xì)介紹了微信小程序progress組件的使用，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-01-01
JavaScript監(jiān)聽(tīng)一個(gè)DOM元素大小變化
這篇文章主要介紹了JavaScript監(jiān)聽(tīng)一個(gè)DOM元素大小變化，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2020-04-04
js模擬jquery的slide和fadeIn和fadeOut功能
以前用過(guò)jquery的slideUp，slideDown，等許多很不錯(cuò)的方法，感覺(jué)很容易就能實(shí)現(xiàn)頁(yè)面元素的動(dòng)畫(huà)效果！2010-07-07
JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見(jiàn)排序（Sort）算法詳解
這篇文章主要介紹了JS中的算法與數(shù)據(jù)結(jié)構(gòu)之常見(jiàn)排序（Sort）算法,結(jié)合實(shí)例形式詳細(xì)分析了js常見(jiàn)排序算法中的冒泡排序、選擇排序、插入排序、希爾排序、歸并排序、快速排序等算法相關(guān)實(shí)現(xiàn)技巧與操作注意事項(xiàng),需要的朋友可以參考下2019-08-08
這篇文章主要介紹了送你43道JS面試題,小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-06-06
mpvue 是一個(gè)使用 Vue.js 開(kāi)發(fā)小程序的前端框架。這篇文章主要介紹了小程序的mpvue框架 ,需要的朋友可以參考下2019-05-05
javascript中使用replaceAll()函數(shù)實(shí)現(xiàn)字符替換的方法
第一次發(fā)現(xiàn)JavaScript中replace()?方法如果直接用str.replace("-","!")?只會(huì)替換第一個(gè)匹配的字符.2010-12-12