react 使用 qrcode.react 插件生成二維碼

react 使用qrcode.react插件生成二維碼並下載

1. 安裝qrcode.react插件

yarn add qrcode.react
// or 
npm install qrcode.react --save

2. 使用qrcode.react插件生成二維碼

　.引用

import QRCode from 'qrcode.react';

    .使用

<QRCode
    id="qrCode"
    value="https://www.jianshu.com/u/992656e8a8a6"
    size={200} // 二維碼的大小
    fgColor="#000000" // 二維碼的顏色
    style={{ margin: 'auto' }}
    imageSettings={{ // 二維碼中間的logo圖片
        src: 'logoUrl',
        height: 100,
        width: 100,
        excavate: true, // 中間圖片所在的位置是否鏤空
     }}
 />        

3. 下載二維碼

<a id="down_link" onClick={this.changeCanvasToPic}>
    點擊下載
</a>

 changeCanvasToPic = () => {
    const canvasImg = document.getElementById('qrCode'); // 獲取canvas類型的二維碼
    const img = new Image();
    img.src = canvasImg.toDataURL('image/png'); // 將canvas對象轉換為圖片的data url
    const downLink = document.getElementById('down_link');
    downLink.href = img.src;
    downLink.download = '二維碼'; // 圖片name
  };