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
相关推荐
惜.己6 小时前
Jmeter中的断言(二)
测试工具·jmeter·1024程序员节
西电研梦15 小时前
考研倒计时30天丨和西电一起向前!再向前!
人工智能·考研·1024程序员节·西电·西安电子科技大学
惜.己16 小时前
Jmeter中的断言(四)
测试工具·jmeter·1024程序员节
·云扬·1 天前
Java IO 与 BIO、NIO、AIO 详解
java·开发语言·笔记·学习·nio·1024程序员节
网安_秋刀鱼1 天前
PHP代码审计 --MVC模型开发框架&rce示例
开发语言·web安全·网络安全·php·mvc·1024程序员节
HUODUNYUN1 天前
小程序免备案:快速部署与优化的全攻略
服务器·网络·web安全·小程序·1024程序员节
惜.己2 天前
Jmeter的后置处理器(二)
测试工具·github·1024程序员节
惜.己2 天前
Jmeter中的断言(一)
测试工具·jmeter·1024程序员节
cainiao0806052 天前
《物理学进展》
1024程序员节·核心期刊·知网期刊·职称评审
FFDUST2 天前
C++ —— string类(上)
c语言·开发语言·数据结构·c++·stl·1024程序员节