提示：文章寫完后，目錄可以自動生成，如何生成可參考右邊的幫助文檔
前端HTML生成二維碼——MQ
- 前言
- 本文將介紹前端HTML如何更具用戶輸入的內容生成對應的二維碼，附頁面代碼、實現函數、js腳本。
- 一、自定義顯示頁面
- 1、效果圖
- 二、使用步驟
- 1、引入庫
- 2、實現函數
- 3、頁面及函數代碼
- 三、附件，QRious.min.js腳本代碼
- 至此，大功告成！
前言
本文將介紹前端HTML如何更具用戶輸入的內容生成對應的二維碼，附頁面代碼、實現函數、js腳本。
一、自定義顯示頁面
1、效果圖
二、使用步驟
1、引入庫
<script src="../lib/QRious.min.js"></script>
2、實現函數
代碼如下（示例）：
<script>// 生成二維碼函數document.getElementById('myButton').addEventListener('click', function () {var dom = document.getElementById('QRcode')var text = document.getElementById('qrcodeText').value; // 獲取input的值if (text == "") {alert("請輸入二維碼內容");return;}if (dom) {//生成二維碼var qr = window.qr = new QRious({element: dom,size: 250,value: ""});qr.value = text;}});</script>
3、頁面及函數代碼
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"><title>二維碼生成</title><script src="../lib/QRious.min.js"></script><style>.container {text-align: center;}</style>
</head><body><div style="text-align: center;font-size: 18px;font-weight: 600;background-color: #007ACC;color: #fff;"><p>Developed by Mo</p></div><h1 style="text-align: center;font-weight: bolder;margin-top: 50px;font-size: 30px;">二維碼碼生成</h1><div style="max-width: 600px;margin: 0 auto;"><div class="input-group"><input type="text" id="qrcodeText" class="form-control" placeholder="請輸入二維碼內容"><span class="input-group-btn"><button class="btn btn-default" type="button" id="myButton">生成二維碼</button></span></div><div><img id="QRcode" width="260" height="260" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAS0AAAEzCAYAAABkP1UFAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAAEnQAABJ0Ad5mH3gAACfdSURBVHhe7d1pUFRX+j/wh52mcUNjEJWoNDISZ5LOxrhMkhIQqpzEJa4xliLiOlWJOlmmSulGnRfJOJo3Rm0REzNRjJYxMU5ksyqLGkVtJ3EYZXFBnRijIAIN3Sz3/2b+Vb/7nJv0SdssR7+fqufN99Th3r60j2I9fQjQNE0jAABFBPIAAKA7Q9MCAKWgaQGAUtC0AEApaFoAoBQ0LQBQCpoWACgFTQsAlIKmBQBKQdMCAKWgaQGAUgK8ffawpaWFZs2aRZcuXeJLD6yQkBDavXs3DR06lC/55OTJk7RkyRIeC1588UWy2Ww87hbcbjfNmjWLrly5wpd0HnnkEdq9ezeFhYXxpW4hJyeHPvvsMx77xGQy0a5duyg2NpYv6Vy6dIlmzZpFLS0tfOmBNXToUNq9ezeFhITwJSLNC7fbrSUmJmpEhPpfhYWFaWVlZfxR+ay4uFi4hlFlZGTwrd2Gy+XSEhIShHvmlZCQoLlcLr6928jIyBDu2dcym81aeXk5v4SgrKxMCwsLE/Y/yJWYmKi53W7+qDRN0zT8eAgASkHTAgCloGkBgFLQtABAKWhaAKAUNC0AUAqaFgAoxetwqcfjIavVSmVlZXxJJygoiKKioiggIIAvKeXOnTvk8Xh4rBMWFkZOp5NGjBjBl3Ta2tqopqaGvDxi+vrrr2nq1Kk8FmRkZFBeXh6PBY2NjdTY2MjjDtXc3EzJyclUWVnJl3QsFguVlJRQeHg4X+pQZrOZzGYzjwWvvvoq5efn81gg8z4xm83kdDopPj6eL+n85z//IavVSm63my/phIaGUu/evXmsFE3TqKamhtra2viSTmJiIjmdTgoNDeVL/mtaQ4YMoYKCAqk3Rnc2e/Zs+vLLL3msI9u0Ll26RGlpaeRyufiSjtvtplu3bvFYINu0Nm7cSH//+9953KE0TaObN29Sa2srX9IJDg6m/v37d/pfbitXrqTly5fzWFBbW+v1+0VENHPmTPrmm294rOPvpvXcc8/RRx99xGOlNDY2UlpaGl2+fJkv6fxS0/LbRLzFYtHq6+v5duWkpaUJr42X7ER8eXm5Zjabhf2+luxEvN1uF/Y+6GW32/ljuifJycnCNXj5eyI+LS2Nb1VOfX29ZrFYhNfGCxPxAHDfQNMCAKWgaQGAUtC0AEApaFoAoBQ0LQBQCpoWACjFb8OlFouFnE4nRUZG8iWdhoaGLjm6eeDAgRQVFcVjQXp6OhUUFPBYR3a4tLq6mqZNm0ZNTU18SUf2mUyaNInWrFnDY8GWLVvovffe47FA9pl0Bdln0qdPHxo0aBCPBUuXLqXFixfzWHDt2jWqra3lsSArK4tOnDjBYx1/D5empaXR4cOHeSyoqamh69ev87jDDR06VOrPv9Vq9frJiW41XHrkyBEtODi40ys3N5ffiiF/Dpe2t7drLS0tXqugoEC4hlEFBgYKr8uoAgMDhb1G5XA4hHvpLvXFF18I92tUGRkZwl6jamtr498eQ5mZmcLzNKqAgADhXnh11XBpbm6ucL+dUUeOHOG3IlByuFTTNGptbe30am9v57fS4QICAig4ONhrBQUF8a2G2tvbhddlVLKvNTAwULiX7lKyz0T2NQQGyr3VZZ+xlx9QupTsa/B3ddYzkftOAgB0E2haAKAUNC0AUAqaFgAoBU0LAJSCpgUASkHTAgCldPpE/JEjRyg5OZnHHc7hcFBWVhaPBf6ciHe5XHTixAmv52E7nU564403eCyIiYmhxMREHgsuXrxIFy9e5LEgNzeXMjMzeSxwOp10+/ZtHusEBQVRUlISRURE8CUd2Wdy5swZevPNN3ksSE9Pp5UrV/JYMGzYMBo2bBiPBfPnz6cdO3bwWPDEE094/TRBeHg4bdmyhQYOHMiXdPw9Eb9t2zZauHAhjztcSUkJjRs3jsc6Sk7El5SUCHs7oxwOB78VQ/6ciO/uxy3LfkogNTVV2MvLZDJp58+f51sF58+f10wmk7C/o0v2uOWMjAxhr1EVFxfzrT7z90S8w+EQ9nZGlZSU8FsRKDkRDwBwL9C0AEApaFoAoBQ0LQBQCpoWACgFTQsAlIKmBQBKQdMCAKVgIp7x50T8jRs3aNWqVV4nnWUNHDiQRo4cyWNBVVWV14ljIqKRI0d6ndYmInr77bfp3LlzPNYJDQ2ldevW0YABA/iSTmNjIx07dkz6dFV/sVgsFBcXx2PBtm3b6KuvvuKxoLi42G/vY0zEizAR30UT8f6Wl5cn3ItR2Ww2vtVQZmamsLejKyEhQXO5XPxWOpzNZhPu5V4KE/FiYSIeAMAAmhYAKAVNCwCUgqYFAEpB0wIApaBpAYBS0LQAQCloWgCglE6fiK+srKQtW7bwuMNNmzaNkpKSeCzw50R8bW0tffjhh9TS0sKXdGJjY2natGk8FuzYsYPmz5/PY4HNZiO73c5jwccff0wnT57ksWDfvn105coVHvvkoYceopUrV1JwcDBf0nnkkUdo6tSpPPZZQUEBFRUV8dhnixYtovj4eB77xN8T8SdOnKC9e/fyuMMtXryYLBYLj3WUnIjv7vw5ES97RnxycjLfasjfE/GyZM6I93elpqby27hv+XsivjvDRDwAPHDQtABAKWhaAKAUNC0AUAqaFgAoBU0LAJSCpgUASkHTAgCl+G0ivk+fPjR37lzjCVaF7N27ly5dusRjHdmJ+IqKCrJardTY2MiXdJKTk6m4uJjHAn9PxO/bt49KS0t5LOjZsyeFhITwWKe1tZXeffdd+umnn/iSzkMPPUSvvfaa14n4lpYWunv3Lo8FTz/9tNTkfFFRkdQznjZtGj311FM8Fmzbts3rVHdISAi99tpr1K9fP76kIzsRP3ToUKlPTnRnHo+HPvjgA6qtreVLOp0yEf8g1f0yES97RnxhYSHfKnC5XFpCQoKwl5fsGfGFhYXCXqPKzMzkWw3JnhGfl5fHtxpKTk4W9vIym81aeXk53yqQnYh/kAoT8QBw30DTAgCloGkBgFLQtABAKWhaAKAUNC0AUAqaFgAoBU0LAJTidSK+vb2dDh48SHfu3OFLD6ygoCB64YUXqFevXnxJ5+7du3Tw4EFqbW3lSzoDBgyg8ePH81hQWVlJR48e5bHgscceo8cff5zHggULFtD27dt5LCgsLKTU1FQe6zQ1NZHVaqULFy7wJZ2EhARyOp1kMpn4kk5RUZHUM8nMzKTc3FweC86ePUv/+te/eCwYM2aM13POiYhSUlKopKSExzpms5mcTqfXs+Tr6uro4MGD1NbWxpceWL1796YXXniBAgMN/l3Fp03hwfEgTcT7mz8n4uHXMWhjAADdF5oWACgFTQsAlIKmBQBKQdMCAKWgaQGAUtC0AEApaFoAoBSvE/Gtra20bNkyqq6u5ktKefXVVyk9PZ3HglWrVtHp06d5rJTZs2fTK6+8wmOB7ET8U0895fWc87a2Njp27JjX8/DNZjONHj2agoKC+JLOrVu36NSpUzwWDBo0iEaOHMljwSuvvEKzZ8/msc9kJuKDgoJo9OjRZDab+ZLO4MGDadOmTV7P4T99+jStWrWKx4L09HR69dVXeSz48MMPadeuXTwWrFixwusnIoiI3nrrLa+fOggPD6dNmzZRTEwMX5LHp025++WMeIfDwV+aobS0NGGvauXvM+Lvh7Lb7fzl3xOZiXjZGjFihNbc3MwvITh8+LCw16iysrL4VkPZ2dnCXqPasWMH32po3Lhxwl5ekZGRWkVFBd/6q+DHQwBQCpoWACgFTQsAlIKmBQBKQdMCAKWgaQGAUtC0AEApaFoAoBSvE/Eej4esViuVlZXxJZ3BgwdTfn4+RURE8CWd0tJSWrhwIY873ODBg6lv3748FqxcuVJqwtqfTp48SYsWLeKxYOLEiWS323ksiI6OpujoaB4Lrl69Srdv3+axT9xuN82cOZMuX77Ml3SGDBlC+fn5FBYWxpd8cuDAAcrJyeGxQPaZyKqqqqL6+noe+yQ8PJwSEhIoICCAL+mMHDmSVq5cyWPBl19+Se+//z6PBZMnT6YXX3yRx4LY2FiKiorisUDmmbjdbsrOzqabN2/yJZ1hw4ZRfn6+8acE+LQpJzsRb7FYtPr6er5dUFJSIuztTnX48GF+yx2uuLhYuA+jysjI4Fu7DX+fES8rNzdXuMb9WmlpafzlG3I4HMJeo8rJyeFbO1x9fb1msViEe+GVmJioud1uvl3TMBEPAKpB0wIApaBpAYBS0LQAQCloWgCgFDQtAFAKmhYAKMXrcGlLSwulpKRQeXk5X9IZMmQIFRcXez1a9siRI5ScnMxjn0VGRlJkZCSPBXV1ddTU1MRjwe7du+n555/nsU5AQAD17duXgoOD+ZJPSkpKKCUlhceCjIwMysvL47GgoaGBGhoaeOyzqKgoCg0N5bFOU1MTWa1WunDhAl/SiYuLo+LiYgoPD+dLOmFhYdSnTx8eC3bv3k0rVqzgsUD2mfTq1YtMJhOPBTU1NeTxeHisI/s+aW1tpdu3b5OXP4r0/PPP0+7du3ks2L9/P61du5bHgtdff13q2flTY2MjpaSkeB1CHj58OBUXFxsOl3ptWpqm0a1bt6i1tZUv6QQHB1O/fv28TvX6u2m99tpr9MYbb/BY8Prrr9NHH33EY0FUVJTXae3Q0FAqKiqi+Ph4vuQTfzetDRs20Pr163nss/z8fHr22Wd5rCPbtGTfJ88++yzl5+fzWOByuaiuro7HgvXr19OGDRt4LNi4cSPNmDGDx4Lp06fTN998w2OdiIgIKioqoqFDh/IlnYqKCkpNTfXaBMPCwqQm0ydPnix1lnyPHj2k/sL3J7/0Ez5t2tH8PRG/evVqfglDWVlZwl5fKywsTCsrK+OX8Jm/J+Ltdruw916qsLCQX0IgOxEvW6mpqfwS98RmswnXMKq8vDy+1ZDMGfFms1krLy/nWwVlZWVaWFiYsN/Xkj0jXlX4Py0AUAqaFgAoBU0LAJSCpgUASkHTAgCloGkBgFLQtABAKV6HS2W53W4qLy+n9vZ2vqRTWlpKWVlZPBZERUXR4MGDeSzIysqiZcuW8ViwZs0a2r9/P499EhoaSnv27PE6NCj7TE6ePCl1BPXEiROljhbeunUrbd68mceCwYMHSw0rbtmyhX7/+9/zWMftdtOMGTO8TjrLPpPU1FQqLCzksc82b95MW7du5bEgJyeHJk6cyGNBSkoKlZSU8FjHZDLRnj17KDY2li/pXLp0iWbMmOF1uFTWlClTKDs7m8c+k32fVFVVef3UQWBgIA0fPtzrAPcv4oNbvqqoqNB69uypBQYG/mIFBAQIw3BGNXfuXK2trc1rtbe381sx1N7eLuy9l5JRXl6u9ejRQ3gGvGSfSUBAgLDXqGS/3rZt24TXZVSyz5jvM6qysjLNZDIJ98LL38Olst9/2dcqM1xKRML35ueK77uXkn2fyNb777/PX76h5ORkYS+vnj17ahUVFXzrr+LXHw/b29u9luw/7AICAigwMNBrGY75G5D9erIli79+o5J9JpqmCXuNSvbryT4T2WfM9/1cdQV/v1ZZ/Hvzc+VPsu8T2ZJ9P8le9151zTsIAMBHaFoAoBQ0LQBQCpoWACgFTQsAlIKmBQBKQdMCAKX4bSK+srKSrFar14lYWfPmzaMdO3bwWHDx4kWqrKzksSAxMZEGDRrEY8GZM2fo1q1bPPbJ9evXaenSpdTc3MyXfBITE0MjR47ksaCqqoqqqqp4LFixYgWlpaXxuEPV1tbSzp07vR63+8gjj9DUqVN57LO4uDiKi4vjsc/efPNNOnv2LI+VUllZSRcvXuSx4M9//jOlpqbyWLB3716qrq7msU54eDht3ryZYmJi+JI8Pm3qq4qKCi0yMlKYzvW15s2bxy9haM2aNcJeo3I4HHyrobS0NGFvd6muOm7Zn5WQkKC5XC5+y4LCwkJh772U3W7nl3jgZWdnC8/pXqqkpIRfokPgx0MAUAqaFgAoBU0LAJSCpgUASkHTAgCloGkBgFLQtABAKWhaAKAUrxPx7e3tdOjQIbpz5w5f0mlqaqLjx49TW1sbX9K5ceMGFRUV8VggOxG/du1aqfOwHQ6H1Nn0f/vb3+j777/nsU5bWxsdOnSI6urq+JJPoqOjpSaOY2Ji6NFHH+Wx4OLFi1IT8cePH5f6NIE/JSQkkNPpJJPJxJd0zp07R++88w6PBZWVlXT8+HEeC+x2O9lsNh4Ljh07JvXs7gdVVVVSE/Gy3nrrLUpMTOSxTmtrK33++edUX1/Pl3R69+5NEyZMMD7plk+bcm63W0tMTBSmX3lZLBatvr6ebxeUlJQIe42qqybiZTQ3N2sjRowQruFrJScn80sYysvLE/Yalc1m41sNZWZmCns7umQn4mXl5uYK1zAq2Yn4jIwMYe/9Wjk5Ofzld7j6+nrNYrEI98IrMTFRc7vdfLumYSIeAFSDpgUASkHTAgCloGkBgFLQtABAKWhaAKAUNC0AUAqaFgAoxetEvMfjIavVSmVlZXxJp1+/frR8+XIKDQ3lSzoej4dqa2t5LHjqqadoxowZPBYUFxdTQUEBjwVTp06lpKQkHgv27dtHly9f5rHg1q1bXqf///956C0tLXxJx2Kx0KJFi3gsOHXqFO3Zs4fHApvNRna7nceCjz/+mEpLS3ncoYKCgqhfv348FgwZMkTqjPiTJ0/S3r17eSyIjIwks9nMY8Hdu3epqamJxz5paWmhnTt3en2/9+3bl+bMmUPBwcF8Sefy5cu0b98+Hgt+97vf0fjx43kskH0msqZPn06xsbE81nG73bRx40a6ffs2X9Lp378/rVixgoKCgviS/ybiZWvcuHH8Et2KzBnxYWFhWllZGd8qKC8v18xms7C/o0t2Ir4rnD9/XjOZTMI980pNTeVb74nNZhOuYVR5eXl8q88aGhq0+Ph44Rq8RowYoTU3N/PtgsOHDwt7jSorK4tvNYQz4gEAOgGaFgAoBU0LAJSCpgUASkHTAgCloGkBgFLQtABAKWhaAKAUrxPxbW1ttHPnTq8TrLJiY2Np+vTpPO5w+/btoxMnTvBY0KdPH69T/cHBwTRnzhzq27cvX9KRnYiXJTsRP2rUKBozZgyPBdOmTaNnnnmGxz5paWmhjRs30k8//cSXdGpqamjnzp3U2trKl3RSU1OpsLCQxz6z2+2Uk5PDY0F6ejqNHDmSxz4JCAigvn37Gk91/x9tbW1069YtHgtkJ+KzsrLI4XDwWHD06FGp8/Vl1dbWksfj4bFOaGgoLV++XOpTET+LT5ver7KysoQJXqM6fPgw39ptyJ4RL1u5ubn8Ej5zuVxaQkKCcA1fq6sm4v1ZZrNZKy8v57ciKCsr08LCwoT9vpbsRLy/jRs3TrgXXpGRkVpFRQXf+qvgx0MAUAqaFgAoBU0LAJSCpgUASkHTAgCloGkBgFLQtABAKWhaAKAUrxPxXeXrr7+mbdu28VgwceJEeumll3gs+Pbbb6miooLHgjNnznid/g8ODqZ169ZRTEwMX+pQO3bsoPnz5/NYMHnyZJo8eTKPBWVlZXT9+nUe+6S1tZUOHTpEd+/e5Us6AwYMoHXr1lFISAhf0qmpqaHTp0/z2GdxcXE0bNgwHgtyc3Ppq6++4rHgrbfeosTERB7rBAcH0x//+Efq0aMHX9Kpq6ujQ4cOef2dA7Li4+Pp97//PY8F+/fvpwMHDvDYZ08++SRFRUXxWCckJIQmTJjg9Zn8Ij5t2l3s2LFDmKY1qtWrV/Ot98SfZ8T7m+xEvOwZ8ZmZmcLejq6EhATN5XLxWxEUFhYKe++l7HY7v4ShjIwMYa9RFRcX863KwRnxAACdAE0LAJSCpgUASkHTAgCloGkBgFLQtABAKWhaAKAUNC0AUIrXifjW1lZasmQJVVdX8yWdmJgYeu+998hkMvElnbNnz9Kbb77JY8Gjjz5K6enpPBZ8++23dPToUR777KWXXqIhQ4bwWCcwMJBGjRpFZrOZL+lcv36dli5dSs3NzXxJ5/HHH6e3336bxwLZifi4uDiKi4vjsSAtLc1v56F7PB5asmQJXbt2jS/pJCQkkNPp9Po+uX37ttREfEFBAW3YsIHHAtlncu7cOfrvf//LY8GTTz7p9XcEhIeH03vvvUcDBw7kSzrV1dW0dOlSv/0uAVmjR4+mUaNG8Viwfv16Kioq4rGgpKSExo0bx2OdpqYmWrp0qddnHBsbS5s3b6bg4GC+5H0i3u12a4mJicL0Ky+LxaLV19fz7YKSkhJhr1HNmzePbzW0Zs0aYe+9lD/PiC8vL9fMZrNwDV7Jycl8qyHZiXjZ6ooz4mUn4mXl5uYK1+gu1VVnxMtWTk4OvxVD8+bNE/YalcxEfH19vWaxWIS9vBITEzW32823axom4gFANWhaAKAUNC0AUAqaFgAoBU0LAJSCpgUASkHTAgClPDBNKyAggAIDA72WpmnU3t7ul9I0Tfj6RhUQEMBv957IvlZ/X5d/faMKCAgQntO91K+5rgzZZydbMu8n2feJbMm+1q7C7/fn6ud4nYj3eDxktVqprKyML+lYLBZyOp0UGRnJl3SOHDlCycnJPBbMmzePduzYwWPB2rVrKTs7m8eC7OxsmjJlCo8F69evp++//57HPnn44Ydp7dq1FBYWxpd0IiMjpaa1ZSfiFy1aREuWLOGxYPDgwV7P9JbV3t5O5eXl5Ha7+ZLOjRs3aNWqVX6b/n722WcpMzOTx4LNmzfT1q1beSzIycmhiRMn8tgnbrebVq9eTT/++CNf0omJiaG1a9caT3/7YP/+/bRmzRoeC3JycqT+7GRkZND777/PY4HMRLzs+yQ8PJyGDx9u3ID5tCl3v0zEOxwOvtWQzBnxshUfH681NDTwS/hMdiJe9oz4rnD+/HnNZDIJ9+xrZWZm8ksYstlswl6jysvL41t91tDQoMXHxwvX4DVixAitubmZb/eZw+EQrmFUXTER7w8//28wAIBuCE0LAJSCpgUASkHTAgCloGkBgFLQtABAKWhaAKCUbtu0XC4X/fDDD16roaGBb70nUVFRNGDAgF+s6Ohovw0C/hoRERHCvRgVEQnPyahcLhe/xH0rMjJSeE5G5fF4hOfka/34449S76c+ffrQjRs3hP2+VktLi3ANo+rRowd/TIZ69eol7DWqhoYG4V543bhxg1pbW/klfpVuOxFvMpmoV69ePBY0NDRINS6Hw0FZWVk8FtTW1nqd1vV4PJSSkkIVFRV8SSc+Pp6cTqfXs+RlNTU1UV1dHY8FW7dupS1btvBYsGHDBpo1axaPO9SFCxfIarVSU1MTX/JJZmYm5ebm8lgg+z6x2Wz02Wef8dgnJpOJ8vPzKTY2li/pXLp0iWbOnEkej4cv+WTKlCm0evVqHgsiIyO9/nklIqqrq5P6fi1cuJBKS0t5rGM2m6m4uNjr72H4RXzalOuqiXh/l+xEvIzm5mZtxIgRwjV4+XsiXpbdbhfuxaj8eUa8rK6aiJeVkZEhXMPX6qoz4rOysvglOsW4ceOEe+EVGRmpVVRU8K2/Srf98RAAwAiaFgAoBU0LAJSCpgUASkHTAgCloGkBgFLQtABAKZ0+XFpaWkoLFy7kcYdbvXq11HHLVVVVVF9fz2Od1tZWys7Oph9++IEv6cTGxlJ+fj6ZTCa+pFNfX09VVVU89pnscKnNZqNJkybxuENduXKFZsyY4XWAV9akSZPIZrPxWBAdHU3R0dE8FsyfP1/qmG8Z3X24VPaZVFdXU01NDY8FMsOlERERlJ+fT4MHD+ZLOuHh4ZSQkNA9jlvu7mSOWw4LC9PKysr4Vp8VFxcL10D5t+x2O3/shvw5XNrdy9/HLfuzEhMTNbfbzW9F0zBcCgCqQdMCAKWgaQGAUtC0AEApaFoAoBQ0LQBQCpoWACgFTQsAlOJ1Ir61tZWWLVtG1dXVfElnwIABtGnTJq/T393dqlWr6PTp0zzWCQkJoU2bNnmd6nW5XHT06FFqa2vjSzpnz56lv/zlLzwWDBw4kH7729/yWFBZWUmVlZU8FowcOZIGDRrEY6Vcu3aNzp07x2PBK6+8QrNnz+axoKioyOunP+h/n+y4ffs2j3WCgoJo9OjRfjtuW9bVq1fp3//+N48Fc+bMoZdffpnHgg0bNlBRURGPO1RiYiI5nU4KDQ3lS94n4sF35eXlmtlsFqZ9fa2MjAx+CUPd+bhlf8vNzRVe171UXl4ev4Sh5ORkYS8v2eOW/c3hcAj3olphIh4A7htoWgCgFDQtAFAKmhYAKAVNCwCUgqYFAEpB0wIApaBpAYBSvE7Et7e308GDB+nOnTt86YEVFBREL7zwAvXq1Ysv6VRUVJDVaqXGxka+pDNgwAAaP348jwVjx46lBQsW8Fhw4MABOnDgAI8Fv/nNb2jAgAE8FqSmplJMTAyPddra2ujgwYNUV1fHl3wSExNDqampPBZs375d6pk8/vjj9Nhjj/FYIPtM3nnnHa+T82azmZxOJ8XHx/Mlnbq6Ojp48KDXT04MHDiQUlJSeCzYtm1bl/wehvHjx0s9OxkxMTG0Zs0aCg4O5kveJ+Jlz4h/kEr2jHjZifjk5GS+tVNkZmYK92JUhYWFfKvA5XJpCQkJwl5fKzU1lV/CkOxEfFecES87EV9WVqaFhYUJ+3mlpaXxrYa6aiK+pKSE30qHwI+HAKAUNC0AUAqaFgAoBU0LAJSCpgUASkHTAgCloGkBgFLQtABAKV4n4j0eD1mtVq/Tv3369KG5c+can+mskL1799KlS5d4rBMWFkZOp5NGjBjBl3Ru3bpF7777LrW0tPAlnZCQEOrZsyePfTZmzBgaM2YMjwX79u2j0tJSHgsWLFjgdaq7qamJrFYrXbhwgS/pREVF0dy5cykkJIQv6cTHx0tNupeWltK+fft4LIiIiJD6/QUNDQ3kdrt5LNizZw9duXKFxzqyE/E3b96kd9991+tE/PDhwykzM5PHAtmJ+LFjx9Lo0aN57LOFCxdSXFwcj3U8Hg998MEHVFtby5d0+vXrR3PnzqWgoCC+5L+JeIvFotXX1/PtyklLSxNeGy/ZiXhZxcXFwjXupWw2G79Eh5OdiE9ISNBcLhff3uFsNptwL0b1IJ0Rn5OTw7d2uPr6es1isQj3wgtnxAPAfQNNCwCUgqYFAEpB0wIApaBpAYBS0LQAQCloWgCgFDQtAFCK3ybiLRYLOZ1OioyM5Es6lZWVtGXLFh53uGnTplFSUhKPBenp6VRQUMBjnV8zEb9hwwbyeDx8SSc0NJT69u3LY0FpaSnt2bOHx4JRo0b5ddJZVv/+/Y0nmP+PtrY2unnzJo999swzz9D06dN5LDh27BgdP36cx4L09HR69NFHeSxISUmhkpISHuuEhITQnDlzqE+fPnypQ3333XdUVFTEY0FOTg5lZ2fzWJCfn0+nTp3isWDx4sVksVh4rNPQ0EBWq5UqKyv5kk5iYiI5nU7jT9jwaVPO3xPxJSUlwt7OKIfDwW/FkD8n4v19RnxeXp6wt7uUyWTSzp8/z29ZcP78ec1kMgn7fa3MzEx+iU4hMxHf3Ut2In7evHnCXqOSOSMeE/EA8MBB0wIApaBpAYBS0LQAQCloWgCgFDQtAFAKmhYAKAVNCwCU0ukT8UeOHKHk5GQedziHw0FZWVk8FvhzIr6iooKsVis1NjbyJZ3o6GhKSUnhsWDgwIE0cuRIHgs++eQT2r9/P48FCxYsoOeee47HgrfffpvOnTvHY52goCCaMGGC17PuzWYzjR49mgID/fP35fXr173eGxHRlClTaPLkyTz2mcxEfFhYGP31r3+lhx9+mC91C5WVlVRVVcVjwbFjx+jixYs8FqSkpFB0dDSPdVpaWuif//wn1dfX8yUdTMR384l42crIyOCXMGS324W9RpWbm8u3GkpNTRX2+lr+PiM+NzdXuIZR2e12vvWeyEzEd9UZ8bKys7OFe+4uhYl4ALhvoGkBgFLQtABAKWhaAKAUNC0AUAqaFgAoBU0LAJSCpgUASsFEPNMVE/GyYmJiKDExkceCMWPG0NixY3ks+OKLL+i7777jsWDGjBk0ZMgQHut4PB5avHgxXb16lS/pREREUFJSktez5J944gl6++23eSzYvn07LViwgMcCu91ONpuNx4L169d7/f4TEZ05c4Zqamp4rBMUFERJSUkUERHBl7qFqqoqunTpEo87lMlkoi1btlBMTAxf0jGbzZSUlGT8yQk+bcphIl6srpqIly2bzcZvxVBmZqaw16gKCwv5VoHL5dISEhKEvb5Wamoqv4Qhf0/EZ2RkCHtR/qvIyEitoqKCP/ZfxaCNAQB0X2haAKAUNC0AUAqaFgAoBU0LAJSCpgUASkHTAgCldHrTCggIoODg4E4vwyG1bkL2mci+hvb2dmptbfVa7e3tfGu3oWmacL9GpWma8JyMSvbZBQYGCnuNKiAggG81FBQUJOztLtVVz+RedfpEfENDQ6dP4dL/zlePiorisaArJuKTkpJo27ZtPBZ8+umntHr1ah4L+vfvL3Uu+bVr16i2tpbHgsLCQkpNTeWxTlNTE1mtVrpw4QJf8klkZCQNHTqUx4Lnn39e6pMODz/8MPXv35/HAtlnkpWVRSdOnOCxjslkor1791JsbCxf6hY2bdpEW7du5bFg7dq1NHHiRB4LFixYQCdPnuSxTmRkJDmdTrJYLHxJHp825fw9Ed/ddcVEfHJyMt9qKC8vT9jbGdUVE/GylZmZyW+lUzxIZ8Tv2LGDbzU0btw4YS8vTMQDwAMHTQsAlIKmBQBKQdMCAKWgaQGAUtC0AEApaFoAoBS/DZcOGTKECgoKyGw28yWlzJ49m7788kse6/h7uHTs2LGUn5/PY8Hnn39Oa9eu5bHPamtryeVy8Viwe/du+sMf/sBjnebmZkpLS6Oqqiq+1KFmzpxJ69ev53GH+9Of/kSlpaU81jGZTPThhx/S4MGD+ZJOcHAw9e/f328T5Y2NjXTnzh0eCxwOB23fvp3HguzsbJowYQKPBcuWLaNTp07xWMdsNlNBQYHX47t/id+aVlBQEEVFRfntwXeVO3fukMfj4bGOv5tWaGgo9e7dm8eCSZMm+bVpLV++nHbt2sVjQe/evSk0NJTHOpqmUU1NDbW1tfGlDhUeHk49e/bkcYfLzc2lpKQkHus0NTXR1KlTqbq6mi/pxMfH05EjR7w+Y1n/+Mc/aOXKlTwWLFu2jBYvXsxjwapVq+jTTz/lsWD79u30zDPP8FgnICCAoqKivP6OgF/Ep0052Yn4B6n8PREvWxkZGfwS90T2jHiUWMXFxfxxChoaGrT4+HhhL68RI0Zozc3NfLvPHA6HcA2jysnJ4VsNzZs3T9hrVCUlJXxrh8D/aQGAUtC0AEApaFoAoBQ0LQBQCpoWACgFTQsAlIKmBQBK8Tpc2tLSQrNmzeqSI5K7q5CQENq9e7fX44Crq6vp5ZdfpqamJr7kkxdffJFsNhuPfbZmzRqpoUEQbd682esgZVNTE82aNYuuXr3Kl3SGDh1Ku3bt8ttw6SeffELr1q3jsWDx4sVSR1Xb7XY6ePAgjwVbtmyhp59+msd+57VpAQB0J/jxEACUgqYFAEpB0wIApaBpAYBS0LQAQCloWgCgFDQtAFDK/wNiabuMDNENSgAAAABJRU5ErkJggg=="></div></div><script>// 生成二維碼函數document.getElementById('myButton').addEventListener('click', function () {var dom = document.getElementById('QRcode')var text = document.getElementById('qrcodeText').value; // 獲取input的值if (text == "") {alert("請輸入二維碼內容");return;}if (dom) {//生成二維碼var qr = window.qr = new QRious({element: dom,size: 250,value: ""});qr.value = text;}});</script>
</body>
</html>
三、附件，QRious.min.js腳本代碼
!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define("qrious",e):t.QRious=e()}(this,function(){"use strict";var t=function(t,e){if(!(t instanceof e))throw new TypeError("Cannot call a class as a function")},e=function(){function t(t,e){for(var i=0;i<e.length;i++){var s=e[i];s.enumerable=s.enumerable||!1,s.configurable=!0,"value"in s&&(s.writable=!0),Object.defineProperty(t,s.key,s)}}return function(e,i,s){return i&&t(e.prototype,i),s&&t(e,s),e}}(),i=function(t,e){if("function"!=typeof e&&null!==e)throw new TypeError("Super expression must either be null or a function, not "+typeof e);t.prototype=Object.create(e&&e.prototype,{constructor:{value:t,enumerable:!1,writable:!0,configurable:!0}}),e&&(Object.setPrototypeOf?Object.setPrototypeOf(t,e):t.__proto__=e)},s=function(t,e){if(!t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return!e||"object"!=typeof e&&"function"!=typeof e?t:e},r=function(){function i(){t(this,i)}return e(i,null,[{key:"privatize",value:function(t,e){for(var i in e)e.hasOwnProperty(i)&&(t["_"+i]=e[i]);return t}},{key:"setter",value:function(t,e,i,s,r){var n=t[e],a=null!=i?i:s;return"function"==typeof r&&(a=r(a)),t[e]=a,a!==n}},{key:"throwUnimplemented",value:function(t,e){throw new Error('"'+e+'" method must be implemented on the '+t+" class")}},{key:"toUpperCase",value:function(t){return null!=t&&t.toUpperCase()}}]),i}(),n=function(){function i(){t(this,i)}return e(i,[{key:"getName",value:function(){r.throwUnimplemented("Service","getName")}}]),i}(),a=function(n){function a(){return t(this,a),s(this,Object.getPrototypeOf(a).apply(this,arguments))}return i(a,n),e(a,[{key:"createCanvas",value:function(){r.throwUnimplemented("ElementService","createCanvas")}},{key:"createImage",value:function(){r.throwUnimplemented("ElementService","createImage")}},{key:"getName",value:function(){return"element"}},{key:"isCanvas",value:function(t){r.throwUnimplemented("ElementService","isCanvas")}},{key:"isImage",value:function(t){r.throwUnimplemented("ElementService","isImage")}}]),a}(n),h=function(r){function n(){return t(this,n),s(this,Object.getPrototypeOf(n).apply(this,arguments))}return i(n,r),e(n,[{key:"createCanvas",value:function(){return document.createElement("canvas")}},{key:"createImage",value:function(){return document.createElement("img")}},{key:"isCanvas",value:function(t){return t instanceof HTMLCanvasElement}},{key:"isImage",value:function(t){return t instanceof HTMLImageElement}}]),n}(a),o=function(){function i(e){t(this,i),this.qrious=e}return e(i,[{key:"draw",value:function(t){r.throwUnimplemented("Renderer","draw")}},{key:"getModuleSize",value:function(t){var e=Math.floor(this.qrious.size/t.width);return Math.max(1,e)}},{key:"getOffset",value:function(t){var e=this.getModuleSize(t),i=Math.floor((this.qrious.size-e*t.width)/2);return Math.max(0,i)}},{key:"render",value:function(t){this.resize(),this.reset(),this.draw(t)}},{key:"reset",value:function(){r.throwUnimplemented("Renderer","reset")}},{key:"resize",value:function(){r.throwUnimplemented("Renderer","resize")}}]),i}(),f=function(r){function n(){return t(this,n),s(this,Object.getPrototypeOf(n).apply(this,arguments))}return 工程優化)
)
