调用 js 生成图片二维码
2024-10-09 09:35:33
一、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: ''
});
二、调用:
<ul class="xxx-firmhome-operationPic" style="float: right; margin: 23px;
text-indent: 2px;">
<!--分享举报收藏-->
<li class="wechat">
<a href="javascript:void(0);">小程序中打开</a>
<div class="pull"><img src="@wechat_QRCode"></div>
</li>
<li class="tjapp">
<a href="javascript:void(0);">app中打开</a>
<div class="pull"><div id="qrcode_app" class="qrcode"></div></div>
</li>
</ul>
三、设置样式:
.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; }
(调试的过程中层因为缓存问题而没有显示出想要的效果)
最新文章
- 黑马----JAVA字符串
- 事实证明,abstract类除了不能用new实例化和类没什么区别
- 多媒体(1):MCI接口编程
- java的if else语句入门
- poj 1416 (hdu 1539)Shredding Company:剪枝搜索
- 每天学点linux命令--tail,cut,sort,uniq
- java基础之Java变量命名规范
- 一键保存网页为PDF
- Kotlin的扩展函数:扩展Android框架(KAD 08)
- 关于tomcat下startup.bat双击闪退的问题
- Vue页面Demo
- 大三小学期 Android开发的一些经验
- PAT-013 L1-013. 计算阶乘和
- rails小重构:将图片加入产品Model之二
- Latex所有常用数学符号整理
- Vue 动态加载组件
- vi命令详解2
- python自定义函数的参数之四种表现形式
- Abhyankar&#39;s Conjecture
- 浅析Java 数组-基础详解