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 (
    <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;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36

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) {
        // 获得二维码 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
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65