【完整】嵌入式当前页面生成二维码（目的方便手机预览）

最新推荐文章于 2024-07-03 10:57:02 发布
最新推荐文章于 2024-07-03 10:57:02 发布
阅读量685 收藏
点赞数
分类专栏： 源码专区 文章标签： javascript 当前页面生成二维码 页面二维码生成 二维码预览 预览二维码
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57941469/article/details/123139243
版权
本文介绍了如何在PC端网页中添加手机预览二维码，方便用户通过扫码在手机上快速查看页面内容。首先引入jQuery和qrcode.min.js库，然后在页面中插入二维码显示框，并使用JavaScript定义二维码大小及生成当前页面URL的二维码。只需将提供的代码插入到页面标签内，即可实现预览效果。
摘要由CSDN通过智能技术生成

在用户浏览PC端页面是为了方面用户在手机端打开页面，一般网站都会添加手机预览二维码，废话不多说我们开始

说明：将以下代码插入所需要添加的页面<body>标签内，然后去前端预览即可

//引入外部js，js文件可自行获取保存到本地，也可以不用管
<script type="text/javascript" src="https://pan.qumaw.com/jquery.min.js"></script>
<script type="text/javascript" src="https://pan.qumaw.com/qrcode.min.js"></script>
 

//显示二维码代码块
<p>手机扫描二维码快速查看</p>
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>


//定义二维码大小，获取二维码链接 
<script type="text/javascript">
//初始化存放二维码的div
	var qrcode = new QRCode(document.getElementById("qrcode"), {
		width : 200,//二维码尺寸
		height : 200
		});
		//window.location.href获取到URL
		qrcode.makeCode(window.location.href);
 
</script>

效果图：

云深不知处㊣
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
嵌入式平台 STM32 libqrencode 移植二维码生成
12-24
嵌入式平台 STM32 libqrencode 移植,移植二维码生成。移植简单方便，Keil MDK5.12 开发环境 串口打印，还包含液晶显示函数，自定义放大二维码
H5页面使用js生成二维码
95后独自打拼的程序猿
08-17 1004
uniapp，vue皆可使用 首先去下载qrcode.js 链接 可以在根目录中新建utils文件夹，把下载的js放进去） 1.引入js 并创建data变量 import qrcode from '@/utils/qrcode.js' data() { return { url: "", qrcodeURL: "" } }, methods: { //生成url二维满 creatQrCode(){ this.url = window.location.h
嵌入式linux Qrcode交叉编译
最新发布
gqd0757的博客
07-03 323
在嵌入式Linux系统上进行QR码库的交叉编译可以让您在嵌入式设备上实现QR码生成或解码的功能。希望以上步骤能帮助您在嵌入式Linux系统上实现QR码库的交叉编译。选择适合嵌入式Linux平台的QR码库，如ZBar、libqrencode等，并获取其源代码。使用交叉编译工具链，在主机上为目标嵌入式平台交叉编译QR码库。使用交叉编译生成的库文件和头文件，在嵌入式设备上编写应用程序来实现QR码的生成或解码功能。在您的开发主机上安装适用于目标嵌入式平台的交叉编译工具链。
pc页面展示 适配手机端
King Saj
03-18 258
<meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=0.3, maxmum-scale=1.0, minimum-scale=0.3">
如何对手机端或PC端内嵌webview的适配
weixin_42578963的博客
02-19 454
对于手机端和PC端内嵌webview的适配，最重要的是要确保不同的系统(Android和IOS)、浏览器(Chrome、Safari等)和设备(桌面、手机)之间的兼容性。可以通过使用CSS和JavaScript来调整不同设备的显示，并使用HTML5和CSS3来实现浏览器的自适应功能。此外，还可以通过设置viewport来控制网页的缩放比例，确保不同设备上的显示效果一致。 ...
嵌入式平台QR code二维码生成
mygod2008ok的专栏
10-17 1065
二维码生成文件下载 链接：https://pan.baidu.com/s/1PTciVTu-K_cOR6QK9OPwkg 提取码：se5e 将下载好的文件解压并加入工程（以Keil平台为例） 生成二维码函数，这里生成64X64像素的二维码 #include "QR_Encode.h" #define QRCODE_WIDTH_HEIGHT 64 /** * @brieaf 绘制二维码 */ void draw_qrcode(uint8_t x1,uint8_t y1,char * cont
QRcode生成，可以添加图片和保存生成的二维码
05-16
在C++中生成二维码，可以借助开源库qrencode。 **1. qrencode库：** qrencode是一个用于生成二维码的开源库，支持多种编程语言接口，包括C++。它能处理多种数据类型，并将其编码为符合国际标准的二维码格式。在本...
android二维码扫描、读取、识别、生成、带logo
05-25
- 使用Zxing库的BitmapGenerator类：传入要编码的数据和生成的二维码尺寸，生成二维码位图。 - 自定义样式：你可以添加自定义的logo，通过在二维码位图上绘制logo位图实现。同时，可以调整二维码的颜色和背景色。 ...
基于Linux Qt的二维码生成 源代码
03-24
在这个项目中，开发者通过集成QR码生成库与Qt框架，实现了在Linux环境中方便快捷地生成二维码的功能。 首先，我们要理解二维码的基本概念。二维码（Quick Response Code）是一种二维条形码，能够存储比传统条形码更...
Android生成扫描二维码
03-14
四、生成二维码 1. 使用ZXing的`MultiFormatWriter`类创建一个条码编码器。 2. 将要编码的数据转换成BitMatrix对象。 ```java Map, ErrorCorrectionLevel> hints = new HashMap(); hints.put(EncodeHintType.ERROR_...
嵌入式二维码显示方案，附源码
04-11
嵌入式二维码的显示方案，代码中用控制台模拟了lcd的显示驱动，请移植的时候自行实现lcd显示驱动。另外移植的时候需要移植config.h中的几个宏定义，自己看下就知道了。
嵌入式C语言二维码源码实现
11-24
该源码是我在自己的设备上自己实践过，可以快速高效的显示出我们想要的二维码，里面需要加入自己重定义的数据类型头文件，以及自己需要实现绘图函数
嵌入式二维码生成器
05-08
可以根据字符串生成嵌入式设备上显示的二维码图片及纯点阵数据。 如智能手表。 具体使用方法查看readme.txt
QRcode二维码生成控件VB调用QrCode控件即可生成.zip
06-29
在这个场景中，我们将QRcode二维码生成控件集成到VB应用中，以实现快速生成二维码的功能。 首先，我们需要理解QR码（Quick Response Code）是一种二维条形码，可以存储更多的信息，如文本、URL、联系人信息等，并且...
嵌入式平台QR Code二维码生成qrduino
nolnew的博客
05-02 1780
嵌入式平台QR Code二维码生成qrduino 作者：Knat 时间：2015年12月22日 实验环境 硬件： (STM32F207)                LCD12864 模块   (ST7565)                  USB转串口模块 TTL                      ST-Link V2 调试 软件：MDK Keil v5.12
C语言 生成二维码-嵌入式平台
qq_36075612的博客
10-21 3610
C语言-二维码
记录--嵌入式设备生成二维码
保持每天的清醒
06-12 1739
开源项目 STMQRcode二维码
【nuxt.js】pc端链接转成二维码 可以手机端长按或者扫扫码识别
小峰同学的前端小屋
11-22 637
需求： vue\nuxt.js项目 中pc端链接转成二维码 可以手机端长按或者扫扫码识别,最终效果： 方法一：单纯生成带数据的二维码 1）：终端安装@xkeshi/vue-qrcode.js包 npm install --save @xkeshi/vue-qrcode //安装到生产环境 <template> <div class="article-id"> <div class="qrcodeBox"> <qrcode :value="
嵌入式linux c语言生成二维码bmp图片
05-24
在嵌入式Linux下使用C语言生成二维码bmp图片，可以通过以下步骤实现： 1. 安装libqrencode库 在嵌入式Linux系统中，可以使用包管理器或手动编译安装libqrencode库，该库提供了生成二维码的API接口。 2. 编写代码生成二维码数据 使用libqrencode库提供的API接口，可以生成二维码数据。以下是一个简单的示例： ``` #include <stdio.h> #include <string.h> #include <qrencode.h> int main(int argc, char **argv) { QRcode *qrcode = QRcode_encodeString("hello world", 0, QR_ECLEVEL_L, QR_MODE_8, 1); if (qrcode) { for (int y = 0; y < qrcode->width; y++) { for (int x = 0; x < qrcode->width; x++) { if (qrcode->data[y*qrcode->width + x] & 1) { printf("*"); } else { printf(" "); } } printf("\n"); } QRcode_free(qrcode); } return 0; } ``` 上面的代码会将字符串"hello world"转换成二维码数据，并输出到终端。 3. 将二维码数据转换成bmp图片 将二维码数据转换成bmp图片可以使用图形库，如libgd。以下是一个简单的示例： ``` #include <stdio.h> #include <string.h> #include <qrencode.h> #include <gd.h> int main(int argc, char **argv) { QRcode *qrcode = QRcode_encodeString("hello world", 0, QR_ECLEVEL_L, QR_MODE_8, 1); if (qrcode) { int width = qrcode->width; gdImagePtr image = gdImageCreate(width, width); int black = gdImageColorAllocate(image, 0, 0, 0); int white = gdImageColorAllocate(image, 255, 255, 255); for (int y = 0; y < width; y++) { for (int x = 0; x < width; x++) { if (qrcode->data[y*width + x] & 1) { gdImageSetPixel(image, x, y, black); } else { gdImageSetPixel(image, x, y, white); } } } FILE *fp = fopen("qrcode.bmp", "wb"); gdImageBmp(image, fp, 0); fclose(fp); gdImageDestroy(image); QRcode_free(qrcode); } return 0; } ``` 上面的代码会将二维码数据转换成bmp图片，并保存到文件"qrcode.bmp"中。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

云深不知处㊣

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值