实现在Node环境与浏览器环境下生成二维码

本文介绍了如何在Node.js环境和浏览器环境中生成二维码。在Node环境中,推荐使用node-qrcode库,详细讲解了安装和生成二维码图片及DataURL的方法。而在浏览器端,推荐了qrcodejs库,通过CDN引入并展示了一个简单的二维码生成DEMO。
摘要由CSDN通过智能技术生成

前言

二维码在我们生活中随处可见,目前也有很多第三方平台可一键生成二维码,也有很多的第三方库支持生成二维码。今天咱们就在Node环境下与浏览器环境下,实现一下二维码的生成。

一、Node环境

目前已经有许多第三方库可支持二维码的生成,今天用的是我比较喜欢的一个第三方库node-qrcode

1. 安装

npm install --save qrcode

//或者全局安装,都可以
npm install -g qrcode

2. 使用

  • 生成文件

安装完成之后,就可以开始使用啦。首先我们先来生成一张图片文件

const QRcode = require("qrcode"); 

QRcode.toFile('./1.jpg', "欢迎来到小黄同学的个人空间~", err => {
   
    console.log(err);
})

这样运行之后,就会在根目录下生成一张名为1.jpg的二维码图片
在这里插入图片描述

  • 生成DataURL

还可以生成DataURL

const QRcode = require("qrcode");

QRcode.toDataURL("欢迎来到小黄同学的个人空间~", (err,url) => {
   
    console.log(url);
})

这样就得到了DataURL
在这里插入图片描述
咱们再把DataURL放到页面上

<body>
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJQAAACUCAYAAAB1PADUAAAAAklEQVR4AewaftIAAATTSURBVO3BQY4cSRIEQdNA/f/Lun30UwCJ9GqSsyaCP1K15KRq0UnVopOqRSdVi06qFp1ULTqpWnRSteikatFJ1aKTqkUnVYtOqhadVC06qVr0yUtAfpOaN4BsUjMBeUPNBOQ3qXnjpGrRSdWik6pFnyxTswnIDZBJzQRkUnMDZFKzSc0E5Ak1m4BsOqladFK16KRq0SdfBuQJNU+omYBMaiYgk5ongDyh5kbNG0CeUPNNJ1WLTqoWnVQt+uQ/Dsik5g01E5BJzQ2QSc1/yUnVopOqRSdViz75xwGZ1NwAuVFzA+QJIP9PTqoWnVQtOqla9MmXqfkmNROQGzUTkBsgk5oJyBNqNqn5m5xULTqpWnRSteiTZUB+E5BJzQTkbwZkUnMD5G92UrXopGrRSdWiT15S8yepmYBMajYBmdTcqJmAPKHmX3JSteikatFJ1aJPXgIyqZmATGomIJOaCcikZpOaCcgTQG7UfBOQSc0NkEnNppOqRSdVi06qFn2yDMgNkCfUTEAmNTdAJjUTkCfU3AB5Qs0E5EbNDZAngExq3jipWnRSteikatEnX6ZmAjKpuQHyhJobIJOaJ4BMat4AsknNBORGzaaTqkUnVYtOqhbhj7wA5EbNBORGzQ2QGzUTkDfU3ACZ1ExAbtQ8AWRSMwF5Q80bJ1WLTqoWnVQt+mSZmifU3AB5AsikZgIyqZmAfJOa36TmBsimk6pFJ1WLTqoWffJlQN5QcwPkDSCTmgnIpOYNIJOaGyA3QCY1E5DfdFK16KRq0UnVIvyRF4A8oWYCMqmZgExqNgG5UTMB2aTmBsikZgJyo+Y3nVQtOqladFK1CH/kDwJyo2YCcqPmBsgTajYBeULNBGSTmk0nVYtOqhadVC365CUgT6iZ1NwAmdTcAJnU3Ki5AXKj5gbIpGYCMqm5UTMBmdRMQH7TSdWik6pFJ1WL8EcWAblRMwG5UTMBmdTcAHlCzRtAJjU3QG7U
`mavlink-node`库是专为Node.js环境设计的,不适用于直接在浏览器中使用。它依赖于Node.js的`net`模块用于处理网络连接和数据传输。 如果你想在浏览器中使用MAVLink库,可以尝试使用`mavlink-common`库。这是一个纯JavaScript实现的MAVLink协议库,没有任何依赖项,可以在浏览器中使用。 以下是在浏览器环境中使用`mavlink-common`库的简单示例: 1. 下载`mavlink-common`库:你可以从`mavlink-common`的GitHub仓库(https://github.com/andreasjansson/mavlink-common)下载或克隆整个仓库。 2. 在你的HTML文件中引入`mavlink.js`库: ```html <script src="path/to/mavlink.js"></script> ``` 3. 创建一个Mavlink实例并设置消息处理程序: ```javascript const mavlink = new Mavlink(); mavlink.on('message', (message) => { // 在这里处理收到的消息 console.log('Received message:', message); }); mavlink.on('error', (err) => { // 处理错误 console.error('Error:', err); }); ``` 4. 发送和接收MAVLink消息: ```javascript // 创建UDP连接 const udpClient = new mavlink.UDPClient('127.0.0.1', 14550); // 接收消息 udpClient.on('message', (message) => { console.log('Received message:', message); }); // 发送消息 const message = new mavlink.messages.heartbeat({ type: mavlink.MAV_TYPE.GCS, autopilot: mavlink.MAV_AUTOPILOT.INVALID, base_mode: mavlink.MAV_MODE_FLAG.MANUAL_INPUT_ENABLED, system_status: mavlink.MAV_STATE.STANDBY, }); udpClient.send(message); ``` 请注意,浏览器安全策略可能会限制跨域请求,因此在浏览器中尝试连接到MAVLink设备可能会受到限制。你可以考虑使用WebSocket或其他允许跨域请求的通信方式。 希望这能帮助你在浏览器环境中使用MAVLink库!如果还有其他问题,请随时提问。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值