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

示例

页面代码

cpp 复制代码
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 (
    <PageContainer
      ghost
      header={{
        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生成二维码接口,需要带上有效的签名

cpp 复制代码
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) {
        // 获得二维码 base64
        let imgBase64 = data.Response.ResultImage;
        // 比如可拼接前缀直接展示在 img 里
        // document.querySelector('#img').src = 'data:image/jpg;base64,' + imgBase64;
        cb('data:image/jpg;base64,' + imgBase64)
      }
    });

}

export default cos
相关推荐
懒惰的bit2 小时前
基础网络安全知识
学习·web安全·1024程序员节
ROCKY_8176 小时前
AndroidStudio-文本显示
1024程序员节
AI大模型训练家9 小时前
Python 语法及入门 丨 专为Python零基础 一篇博客让你完全掌握Python语法
服务器·开发语言·网络·python·1024程序员节
HPC_fac130520678169 小时前
科学计算服务器:如何计算算力?如何提升科学研究效率?
运维·服务器·人工智能·科技·gpu算力·1024程序员节
鹏大师运维9 小时前
【系统配置】命令行配置麒麟安全中心应用程序来源检查
linux·安全·国产化·麒麟·国产操作系统·1024程序员节·应用检测
网安_秋刀鱼9 小时前
中间件安全
安全·web安全·网络安全·中间件·1024程序员节
白总Server17 小时前
Swagger UI
后端·ui·spring cloud·ribbon·架构·scala·1024程序员节
一个通信老学姐21 小时前
专业140+总分430+复旦大学875信号与系统考研经验原957电子信息通信考研,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
一个通信老学姐21 小时前
专业140+总分400+南京大学851信号与系统考研经验南大电子信息通信工程集成电路,真题,大纲,参考书。
考研·信息与通信·信号处理·1024程序员节
汉克老师1 天前
GESP4级考试语法知识(贪心算法(二))
开发语言·数据结构·c++·算法·贪心算法·图论·1024程序员节