生成二維碼方法匯總
隨著網(wǎng)絡(luò)的迅速發(fā)展 發(fā)展 發(fā)展，二維碼的應(yīng)用將會越來越多。同時很多只是很平凡的二維碼，請拿起你的手 把這個二維碼 設(shè)計起來吧。下面分享了幾個非常好的二維碼設(shè)計。
二維碼原理：
二維條碼/二維碼可以分為堆疊式/行排式二維條碼和矩陣式二維條碼。 堆疊式/行排式二維條碼形態(tài)上是由多行短截的一維5條碼堆疊而成；矩陣式二維條碼以矩陣的形式組成，在矩陣相應(yīng)元素位置上用“點”表示二進制“1”， 用“空”表示二進制“0”，“點”和“空”的排列組成代碼。
最近對二維碼產(chǎn)生了興趣 研究了一下二維碼 這里生出的術(shù)語 qrcode 容錯性較高。
數(shù)據(jù)表示方法
深色模塊表示二進制“1”，淺色模塊表示二進制“0”。
糾錯能力
· L級：約可糾錯7%的數(shù)據(jù)碼字
· M級：約可糾錯15%的數(shù)據(jù)碼字
· Q級：約可糾錯25%的數(shù)據(jù)碼字
· H級：約可糾錯30%的數(shù)據(jù)碼字
上面的設(shè)計 就很完美的利用了 qrcode的容錯性，非常nice 也非常有創(chuàng)意??！
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 （重點）
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://m.fzitv.net/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種最簡單，第二種是我推薦的，自由度大些，小伙伴根據(jù)自己的需求來選擇吧
相關(guān)文章
javascript正則表達式中參數(shù)g(全局)的作用
表達式加上參數(shù)g之后，表明可以進行全局匹配，注意這里可以的含義。2010-11-11
TypeScript 是一種由微軟開發(fā)的開源、跨平臺的編程語言。它是 JavaScript 的超集，最終會被編譯為 JavaScript 代碼，關(guān)于TypeScript的安裝、使用、自動編譯很多朋友不是很清楚，今天抽空給大家普及下，感興趣的朋友一起看看吧2021-06-06
在JavaScript中,有多種方法可以合并數(shù)組,本文主要介紹了8種方法,主要包括concat()、spread operator、push()、unshift()、splice()、Array.from()、Array.prototype.reduce()和ES6的Array.prototype.flat(),感興趣的可以了解一下2023-08-08
這篇文章主要介紹了JS求平均值的小例子，有需要的朋友可以參考一下2013-11-11
js實現(xiàn)網(wǎng)頁自動刷新可制作節(jié)日倒計時效果
這篇文章主要介紹了通過js實現(xiàn)的網(wǎng)頁自動刷新，利用此功能可制作節(jié)日倒計時效果,需要的朋友可以參考下2014-05-05
這篇文章主要為大家詳細介紹了PhotoSwipe異步動態(tài)加載圖片方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-08-08
JavaScript在網(wǎng)頁中畫圓的函數(shù)arc使用方法
這篇文章主要介紹了JavaScript在網(wǎng)頁中畫圓的函數(shù)arc使用方法的相關(guān)資料,需要的朋友可以參考下2015-11-11
JavaScript實現(xiàn)網(wǎng)頁版貪吃蛇游戲
這篇文章主要為大家詳細介紹了JavaScript實現(xiàn)網(wǎng)頁版貪吃蛇游戲，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-07-07
下面小編就為大家?guī)硪黄冒俣鹊貓DAPI獲取當(dāng)前位置信息的實例。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧，希望對大家有所幫助2017-11-11
JavaScript使用Promise封裝Axios進行高效開發(fā)
這篇文章主要介紹了JavaScript使用Promise封裝Axios進行高效開發(fā)，Axios是一個基于Promise的HTTP庫，它可以幫助我們更方便地發(fā)起HTTP請求，并且提供了許多高級功能，感興趣的同學(xué)可以參考下文2023-05-05