html 代码:
<img style="display: none" id="qrcode" data-width="100" data-height="100" data-url="https://www.baidu.com/">
相关 JS 代码:
- /**
- * 生成二维码
- * data-width={宽度}
- * data-height={高度}
- * data-url={链接}
- * @param $ele
- */
- var generatorQRCODE = function ($ele) {
- $ele.hide();
- var params = $ele.data();
- if(!params['width'] || !params['height'] || !params['url']){
- console.log('生成二维码参数错误');
- return false;
- }
- var image = new Image();
- var imageUrl = "http://pan.baidu.com/share/qrcode?w=" + params['width'] + "&h=" + params['height'] + "&url=" + params['url'] + "";
- image.src = imageUrl;
- $ele.attr('src', imageUrl);
- $ele.show();
- };
- generatorQRCODE($("#qrcode"));
再给大家分享一下其他生成二维码的案例:
使用 jquery.qrcode 生成二维码
1 首先在页面中加入 jquery 库文件和 qrcode 插件
- <script type="text/javascript" src="jquery.js"></script>
- <script type="text/javascript" src="jquery.qrcode.min.js"></script>
2 在页面中需要显示二维码的地方加入以下代码:
<div id="code"></div>
3 调用 qrcode 插件支持 canvas 和 table 两种方式进行图片渲染
canvas 方式:
$('#code').qrcode("http://www.baidu.com"); // 任意字符串
table 方式:
- $("#code").qrcode({
- render: "table", //table 方式
- width: 200, // 宽度
- height:200, // 高度
- text: "www.helloweba.com" // 任意内容
- });
4 如果生成的二维码内容包含文字, 需要把字符串转换成 UTF-8
定义转化方法:
- function toUtf8(str) {
- var out, i, len, c;
- out = "";
- len = str.length;
- for(i = 0; i < len; i++) {
- c = str.charCodeAt(i);
- if ((c >= 0x0001) && (c <= 0x007F)) {
- out += str.charAt(i);
- } else if (c > 0x07FF) {
- out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
- out += String.fromCharCode(0x80 | ((c >> 6) & 0x3F));
- out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
- } else {
- out += String.fromCharCode(0xC0 | ((c >> 6) & 0x1F));
- out += String.fromCharCode(0x80 | ((c >> 0) & 0x3F));
- }
- }
- return out;
- }
在生成的时候调用转化方法:
- var str = toUtf8("字符串测试!");
- $('#code').qrcode(str);
二在 vue-cli 项目中动态生成二维码
1 引入 qrcode--------npm install qrcode
2 在 main.js 中引入
import QRCode from 'qrcode' // 定义生成二维码组件
3 在需要使用到生成二维码的组件中引入
import QRCode from 'qrcode' // 引入生成二维码组件
4 在 HTML 中定义生成的位置, 注意添加样式
- <template>
- <div id="query">
- <h1 > 二维码:</h1>
- <canvas id="canvas"></canvas>
- </div>
- </template>
- #canvas{
- width: 80%!important;
- height: auto!important;
- }
5 在 js 中定义生成二维码的方法并调用
- // 动态生成二维码
- useqrcode(){ // 生成的二维码内容, 可以添加变量 this.QueryDetail='http://www.kspxzx.com/#/guard'+"?unique_code="+this.QueryDetail;var canvas = document.getElementById('canvas')
- QRCode.toCanvas(canvas, this.QueryDetail, function (error) {
- if (error) console.error(error)
- console.log('success!');
- })
- }
来源: http://www.jb51.net/article/136102.htm