当前位置：首页 > news >正文

js实现将文本生成二维码（腾讯云cos）

news 2025/8/29 10:59:02

示例
在这里插入图片描述

页面代码

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