js实现将文本生成二维码(腾讯云cos)

示例
在这里插入图片描述

页面代码

import { getQCodeUrl } from '@/utils/cosInstance';
import { PageContainer } from '@ant-design/pro-components';
import { Access, useAccess } from '@umijs/max';
import { Button, Image } from 'antd';
import { useState } from 'react';const AccessPage: React.FC = () => {const access = useAccess();const [imgSrc, setImgSrc] = useState('')return (<PageContainerghostheader={{title: '权限示例',}}><Access accessible={access.canSeeAdmin}><Button onClick={() => {getQCodeUrl('wifi9090密码', '234r4444', (url:string) => {console.log(url);setImgSrc(url)})}}>只有 Admin 可以看到这个按钮</Button><Image  src={imgSrc}  height={60} width={60}/></Access></PageContainer>);
};export default AccessPage;

cos-js-sdk-v5

调用cos生成二维码接口,需要带上有效的签名

let COS = require('cos-js-sdk-v5');const COS_DATA = {Bucket: '', /* 存储桶,必须 */Region: 'ap-shanghai', /* 存储桶所在地域,必须字段 */SecretId: '',SecretKey: '',
}// SECRETID 和 SECRETKEY 请登录 https://console.cloud.tencent.com/cam/capi 进行查看和管理
let cos = new COS({SecretId: COS_DATA.SecretId,SecretKey: COS_DATA.SecretKey,
});// 获取签名
export const getTempSign = (key: string) => {let Authorization = COS.getAuthorization({SecretId: COS_DATA.SecretId,SecretKey: COS_DATA.SecretKey,Method: 'get',Key: key,Expires: 60,Query: {},Headers: {},});return Authorization
}export const getQCodeUrl = (key: string, text: string, cb: (url: string) => void) => {const url = `https://${COS_DATA.Bucket}.cos.${COS_DATA.Region}.myqcloud.com`;// const onlyKey = `qrcode/${Date.now()}/${key}`cos.request({Method: 'GET',Key: '',Url: url,Query: {'ci-process': 'qrcode-generate', /* 必须,对象存储处理能力,二维码生成参数为 qrcode-generate	*/'qrcode-content': text, /* 必须,可识别的二维码文本信息	 */mode: 0, /* 非必须,生成的二维码类型,可选值:0或1。0为二维码,1为条形码,默认值为0	*/width: 200, /* 必须,指定生成的二维码或条形码的宽度,高度会进行等比压缩	*/},Headers: {Authorization: getTempSign('')}},function (err:any, data:any) {console.log('data---',data);if (!err) {// 获得二维码 base64let imgBase64 = data.Response.ResultImage;// 比如可拼接前缀直接展示在 img 里// document.querySelector('#img').src = 'data:image/jpg;base64,' + imgBase64;cb('data:image/jpg;base64,' + imgBase64)}});}export default cos

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/120230.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

16 用于NOMA IoT网络上行链路安全速率最大化的HAP和UAV协作框架

文章目录 摘要相关模型仿真实验仿真结果 摘要 优化无人机到HAP的信道分配、用户功率和无人机三维位置来研究上行安全传输解决非凸问题&#xff0c;采用K-means聚类算法&#xff0c;将成对的用户划分成不同的组&#xff0c;每个簇可以有相应的无人机服务&#xff0c;然后将构造…

vue3-admin-element框架登录如何修改?

1、找到vite.config.js文件 配置反向代理 2、找到src文件下的user.js文件 3、找到views文件下的login文件 打开找到comp文件夹找到LoginFrom.vue页面进去 把这个改成自己的账户数据&#xff08;密码不一致自行更改&#xff09; 4、找到store文件下的modules下的user.js 5、找到…

虹科 | 解决方案 | 汽车示波器 学校教学方案

虹科Pico汽车示波器是基于PC的设备&#xff0c;特别适用于大课堂的教学、备课以及与师生的互动交流。老师展现讲解波形数据&#xff0c;让学生直观形象地理解汽车的工作原理 高效备课 课前实测&#xff0c;采集波形数据&#xff0c;轻松截图与标注&#xff0c;制作优美的课件&…

pytest-yaml 测试平台-3.创建执行任务定时执行用例

前言 当项目用例编写完成后&#xff0c;需设置执行策略&#xff0c;可以用到定时任务设置每天几点执行。或者间隔几个小时执行一次。 创建定时任务 创建任务 勾选需要执行的项目以及运行环境 触发器可以支持2种方式&#xff1a;interval 间隔多久触发和 cron 表达式定时执行…

甲骨文真的要开放Java EE?

甲骨文表示&#xff0c;目前正在与可能的几个候选基金会&#xff0c;以及许可证持有者和社区在进行谈判。随着Java EE 8平台的确定&#xff0c;甲骨文在周四表示&#xff0c;目前正在考虑将Java Enterprise Edition技术转移到开源社区。 甲骨文在其博客中说道&#xff0c;这次的…

JAVA毕业设计104—基于Java+Springboot+Vue的医院预约挂号小程序(源码+数据库)

基于JavaSpringbootVue的医院预约挂号小程序(源码数据库)104 一、系统介绍 本系统前后端分离带小程序 小程序&#xff08;用户端&#xff09;&#xff0c;后台管理系统&#xff08;管理员&#xff0c;医生&#xff09; 小程序&#xff1a; 预约挂号&#xff0c;就诊充值&…

【LeetCode:1465. 切割后面积最大的蛋糕 | 贪心 + 排序】

&#x1f680; 算法题 &#x1f680; &#x1f332; 算法刷题专栏 | 面试必备算法 | 面试高频算法 &#x1f340; &#x1f332; 越难的东西,越要努力坚持&#xff0c;因为它具有很高的价值&#xff0c;算法就是这样✨ &#x1f332; 作者简介&#xff1a;硕风和炜&#xff0c;…

YTM32的增强型定时器eTMR外设模块详解

文章目录 eTMR外设简介eTMR工作机制系统框图引脚与信号计数器与时钟源输出比较模式PWM模式通道配对通道对的互补输出&#xff08;Complementary Mode&#xff09;双缓冲输出PWM&#xff08;Double Switch&#xff09;错误检测机制&#xff08;Fault Detection&#xff09; 输入…

SpringBoot使用WebSocket收发实时离线消息

引入maven依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-websocket</artifactId> </dependency> WebScoket配置处理器 import org.springframework.boot.web.servlet.ServletContextI…

如何为你的地图数据设置地图样式?

地图样式设置是GIS系统中非常重要的功能模块&#xff0c;水经微图Web版本最近对符号样式功能模块进行了升级。 你可以通过以下网址直接打开访问&#xff1a; https://map.wemapgis.com 现在我们为大家分享一下水经微图Web版中&#xff0c;如何为你标注的地图数据设置地图样式…

【干货】JVS低代码表单基础组件的配置与应用

表单的基础组件主要用于收集用户输入的数据&#xff0c;并对这些数据进行验证和处理。通过表单组件&#xff0c;用户可以输入各种类型的数据&#xff0c;如文本、数字、日期、选择项等。这些数据可以通过表单的提交按钮提交到服务器进行处理&#xff0c;从而使网站或应用程序能…

LeetCode209——长度最小的子数组

LeetCode209——长度最小的子数组 题目描述&#xff1a; 给定一个含有 n 个正整数的数组和一个正整数 target 。 找出该数组中满足其总和大于等于 target 的长度最小的 连续子数组 [numsl, numsl1, …, numsr-1, numsr] &#xff0c;并返回其长度。如果不存在符合条件的子数…

什么是React Router?它的作用是什么?

聚沙成塔每天进步一点点 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 欢迎来到前端入门之旅&#xff01;感兴趣的可以订阅本专栏哦&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发…

“全数前进”媒体交流会在京举办

10月26日&#xff0c;北京市产业经济研究中心联合升哲科技&#xff08;SENSORO&#xff09;举办了以“全数前进”为题的媒体交流会。 会上&#xff0c;北京市产业经济研究中心副主任薛健为与会的媒体朋友介绍了AIoT智慧院落的建设情况&#xff0c;并阐述了北京市经信局在促进数…

pytorch 入门 (五)案例三:乳腺癌识别识别-VGG16实现

本文为&#x1f517;小白入门Pytorch内部限免文章 &#x1f368; 本文为&#x1f517;小白入门Pytorch中的学习记录博客&#x1f366; 参考文章&#xff1a;【小白入门Pytorch】乳腺癌识别&#x1f356; 原作者&#xff1a;K同学啊 在本案例中&#xff0c;我将带大家探索一下深…

uniapp:谷歌地图,实现地图展示,搜索功能,H5导航

页面展示 APP H5 谷歌地图功能记录,谷歌key申请相对复杂一些,主要需要一些国外的身份信息。 1、申请谷歌key 以下是申请谷歌地图 API 密钥的流程教程: 登录谷歌开发者控制台:打开浏览器,访问 Google Cloud Platform Console。 1、创建或选择项目:如果你还没有创建项目…

trucksim常见问题

一、Error: Unable to load .vs data from “D:\Users\Public\Documents\TruckSim2019.0 Data\Results\Run_e24aa2… LastRun.vs”.Reason for failure: Invalid character OxFFFFFFB2 in string"" on line 4.Would you like to continue receiving alerts of this t…

【分享】7-Zip压缩包的密码可以取消吗?

7-Zip压缩包设置了“密码保护”&#xff0c;后面又不想要了&#xff0c;可以取消吗&#xff1f; 首先&#xff0c;我们要分两种情况来看&#xff0c;是记得密码&#xff0c;但不想每次打开压缩包都要输入密码&#xff0c;所以想取消密码&#xff0c;还是把密码忘记了所以想取消…

搜维尔科技:【应用】配备MTi-3的轻便型ROV,在水下进行地理标记视觉检测

部署潜水员进行水下摄像&#xff0c;不仅难度高而且费用昂贵&#xff0c;需要受过潜水和摄像两方面培训的专业人员来进行。但有些水下作业任务例如拍摄海底管道内部的照片&#xff0c;由于人员无法进入或危险度高的原因&#xff0c;无法由潜水员完成。 如今&#xff0c;俄罗…

openEuler 22.03 LTS 环境使用 Docker Compose 一键部署 JumpServer (all-in-one 模式)

环境回顾 上一篇文章中&#xff0c;我们讲解了 openEuler 22.03 LTS 安装 Docker CE 和 Dcoker Compose&#xff0c;部署的软件环境版本分别如下&#xff1a; OS 系统&#xff1a;openEuler 22.03 LTS(openEuler-22.03-LTS-x86_64-dvd.iso)Docker Engine&#xff1a;Docker C…