logo注意跨域问题 <!doctype html> <html> <head> <meta charset="UTF-8"> <title>QRGen</title> <script type="text/javascript" src="http://sandbox.runjs.cn/uploads/rs/142/gjxgxu0g/qrgen.min.js"></script> <style type="text/css"> body{background:white;} *{box-sizing:border-box;} table{border-collapse:collapse;width:300px;float:left;} td{vertical-align:top;} td>*{width:100%;} td .left{float:left;} td .center{text-align:center;} td .right{float:right;} .buttons>*{display:inline-block;width:auto;margin-right:1em;} .hide{display:none;} .nowrap{white-space:nowrap;} #logoWrap{border:1px solid gray;background:wheat;position:relative;padding:.5em;margin-top:.5em;} #logoOptions{position:absolute;top:-1.5em;right:0;} #logoOptions>*{display:inline-block;background:white;border:1px solid gray;padding:0 3px;height:1.5em;line-height:1.5em;cursor:pointer;} #logoOptions>*.active{background:wheat;border-bottom:none;} #logoImg{max-width:100px;max-height:100px;} #qrcanvas{float:left;margin:20px;} @media (min-width:800px) { body{background:#eee} .content{max-width:800px;margin:0 auto;background:white;padding:20px;} .content::after{content:" ";display:block;clear:both;} } </style> </head> <body> <a target=_blank href="https://github.com/gera2ld/jsqrgen"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://camo.githubusercontent.com/652c5b9acfaddf3a9c326fa6bde407b87f7be0f4/68747470733a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f6f72616e67655f6666373630302e706e67" alt="Fork me on GitHub" data-canonical-src="https://s3.amazonaws.com/github/ribbons/forkme_right_orange_ff7600.png"></a> <div class="content"> <table> <caption>纯JS生成二维码（JSQRGen 2.0）</caption> <tr> <td class="nowrap">文本：</td> <td> <textarea id="qrtext">http://www.gzui.net</textarea> （使用utf-8编码，支持中文） </td> </tr><tr> <td class="nowrap">大小：</td> <td><input id="cellSize" type="range" min="2" max="10" value="6"></td> </tr><tr> <td rowspan="2" class="nowrap">特效：</td> <td><input id="cellEffect" type="range" min="-50" max="50" step="5" value="0"></td> </tr><tr> <td id="cellEffectStops"> <div> <div class="left"><a href="#" data-key="l">液态</a></div> <div class="right"><a href="#" data-key="r">圆角</a></div> <div class="center"><a href="#" data-key="s">直角</a></div> </div> </td> </tr><tr> <td rowspan="4" class="nowrap">颜色：</td> <td>前景色 <input id="colorFore" type="color" value="#4169e1"></td> </tr><tr> <td>背景色 <input id="colorBack" type="color" value="#ffffff"></td> </tr><tr> <td>码眼外框 <input id="colorOut" type="color" value="#cd5c5c"></td> </tr><tr> <td>码眼内框 <input id="colorIn" type="color" value="#191970"></td> </tr><tr> <td>最小typeNumber</td> <td><input id="typeNumber" type="range" value=1 min=1 max=10 step=1></td> </tr><tr> <td colspan="2"> <div> <label><input id="cblogo" type="checkbox">加入Logo</label> </div> <div colspan="2" id="logoWrap" class="hide"> <div id="logoOptions"> <span data-type="image">图片</span> <span data-type="text">文本</span> </div> <div class="tab" data-type="image"> 图片：<img id="logoImg" src="http://www.gzui.net/wp-content/themes/yusi1.0/timthumb.php?src=http://www.gzui.net/wp-content/uploads/2015/05/tg.jpg"><br> <input id="fimg" type="file"> </div> <div class="tab" data-type="text"> 文本：<input id="logoText"><br> 字体：<input id="logoFont" placeholder="字体名称"><br> 颜色：<input id="logoColor" type="color"> <label><input id="logoBold" type="checkbox">加粗</label> <label><input id="logoItalic" type="checkbox">斜体</label> </div> <div>大小：<input id="logoSize" type="range" min="5" max="15" value="15"></div> <div>边界清理：<input id="qrclearedges" type=range min=0 max=2 value=0></div> <div>边距：<input id="logoMargin" type=range min=0 max=10 value=0></div> </div> </td> </tr><tr> <td colspan="2" class="buttons"> <button id="qrgen">生成二维码</button> <a href="http://gerald.top/code/qrgen">文档</a> <a target="_blank" href="https://github.com/gera2ld/jsqrgen">访问Github</a> </td> </tr> </table> <div id="qrcanvas"></div> </div> <script type="text/javascript"> (function ($) { function forEach(arr, cb) { for (var i = 0; i < arr.length; i ++) cb.call(arr, arr[i], i); } function updateLogoTab() { forEach(logoTabs, function (ele) { ele.classList[ele.dataset.type === logoTab.type ? 'remove' : 'add']('hide'); }); } function toggleLogo() { if (cbLogo.checked) { logoWrap.classList.remove('hide'); logoOptions.classList.remove('hide'); updateLogoTab(); } else { logoWrap.classList.add('hide'); logoOptions.classList.add('hide'); } } function updateLogoType(ele) { if (logoTab.head) logoTab.head.classList.remove('active'); logoTab.head = ele; logoTab.type = ele.dataset.type; ele.classList.add('active'); updateLogoTab(); } var logoWrap = $('#logoWrap'); var logoTabs = logoWrap.querySelectorAll('.tab'); var logoOptions = $('#logoOptions'); var cbLogo = $('#cblogo'); var logoImg = $('#logoImg'); var logoTab = {}; updateLogoType($('#logoOptions>[data-type]')); cbLogo.onchange = toggleLogo; $('#cellEffectStops').addEventListener('click', function (e) { var d = e.target.dataset.key; if (d) { e.preventDefault(); switch (d) { case 's': t.value = 0; break; case 'l': t.value = -50; break; case 'r': t.value = 50; break; } } }, false); logoOptions.addEventListener('click', function (e) { var type = e.target.dataset.type; if (type) updateLogoType(e.target); }, false); toggleLogo(); $('#fimg').addEventListener('change', function (e) { var reader = new FileReader; reader.onload = function () { logoImg.src = this.result; }; reader.readAsDataURL(e.target.files[0]); }, false); var q = $('#qrcanvas'); var t = $('#cellEffect'); $('#qrgen').onclick = function () { var s = t.value / 100; var colorIn = $('#colorIn').value; var colorOut = $('#colorOut').value; var colorFore = $('#colorFore').value; var colorBack = $('#colorBack').value; var options={ cellSize: Number($('#cellSize').value), foreground: [ // foreground color {style: colorFore}, // outer squares of the positioner {row: 0, rows: 7, col: 0, cols: 7, style: colorOut}, {row: -7, rows: 7, col: 0, cols: 7, style: colorOut}, {row: 0, rows: 7, col: -7, cols: 7, style: colorOut}, // inner squares of the positioner {row: 2, rows: 3, col: 2, cols: 3, style: colorIn}, {row: -5, rows: 3, col: 2, cols: 3, style: colorIn}, {row: 2, rows: 3, col: -5, cols: 3, style: colorIn}, ], background: colorBack, data: $('#qrtext').value, typeNumber: Number($('#typeNumber').value), }; q.innerHTML=''; if (cbLogo.checked) { options.logo = { clearEdges: Number($('#qrclearedges').value), size: $('#logoSize').value / 100, margin: Number($('#logoMargin').value), }; if (logoTab.type == 'image') options.logo.image = logoImg; else { options.logo.text = $('#logoText').value; var font = $('#logoFont').value; if (font) options.logo.fontFace = font; options.logo.color = $('#logoColor').value; var style = ''; if ($('#logoItalic').checked) style += 'italic '; if ($('#logoBold').checked) style += 'bold '; options.logo.fontStyle = style; } } if (s >= 0) options.effect = {key: 'round', value: s}; else options.effect = {key: 'liquid', value: -s}; q.appendChild(qrgen.canvas(options)); }; })(document.querySelector.bind(document)); </script> </body> </html> 提示：你可以先修改部分代码再运行。 转载请注明：有爱前端 » 生成二维码 喜欢 (2)or分享 (0)
