博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
调用 js 生成图片二维码
阅读量:5128 次
发布时间:2019-06-13

本文共 1865 字,大约阅读时间需要 6 分钟。

一、js 生成二维码:

  首先,需要引用 jQuery 和 jquery.qrcode.js。然后:

//生产二维码            $("#qrcodeCanvas").qrcode({                render: "canvas",    //设置渲染方式,有table和canvas,使用canvas方式渲染性能相对来说比较好                text: location.href,    //扫描二维码后显示的内容,可以直接填一个网址,扫描二维码后自动跳向该链接                width: "100",               //二维码的宽度                height: "100",              //二维码的高度                background: "#ffffff",       //二维码的后景色                foreground: "#000000",        //二维码的前景色                src: ''             //二维码中间的图片            });

  或:(ASP.NET MVC)

jQuery('#qrcode_app').qrcode({            render: "canvas",            text: '@(app_positionQr)',            width: 100,            height: 100,            background: "#ffffff",       //二维码的后景色            foreground: "#000000",        //二维码的前景色            src: ''        });

二、调用:

三、设置样式:

.qrcode {            display: block;            width: 100px;            height: 100px;            border: 2px solid #ff8502;            background-color: #fff;            padding: 10px;            margin-top: 10px;        }.xxx-firmhome-operationPic li.tjapp {position: relative;}.xxx-firmhome-operationPic li.tjapp a{ background:url(../images/firmhome/comProfile-name-pic5.png) no-repeat left top;}.xxx-firmhome-operationPic li.tjapp .pull {   width: 120px; height: 130px; background:url(../images/firmhome/comProfile-top-operationPic-share-pic.png) no-repeat 82px top; position: absolute; right: -7px; top: 24px; display: none; z-index: 1; }

  (调试的过程中层因为缓存问题而没有显示出想要的效果)

转载于:https://www.cnblogs.com/zhangchaoran/p/10495359.html

你可能感兴趣的文章
如何在Windows Azure虚拟机上部署OpenLogic CentOS镜像
查看>>
Java 多线程------01
查看>>
八大排序之堆排序
查看>>
LFS Linux From Scratch 笔记2(经验非教程)BLFS
查看>>
TensorFlow|非线性回归
查看>>
网站安全统一监测平台(WebPecker)
查看>>
java 调用 phantomjs
查看>>
妈,如果你努力工作
查看>>
C++ 中用于实现动态多态性
查看>>
类间关系总结
查看>>
properties配置文件读写,追加
查看>>
LOJ 3156: 「NOI2019」回家路线
查看>>
QR code 乱谈(一)
查看>>
shit IE & no table `border-collapse: collapse;`
查看>>
Angularjs中的拦截器 (卧槽,好牛逼)
查看>>
img和div的宽度不一样问题和li之间空隙问题的解决方案
查看>>
JAVA - ATM机程序
查看>>
k8s kube-proxy 生成kube-config文件
查看>>
动态增加树形分类
查看>>
MHA运维
查看>>