/**

 * 將svg匯出成圖片

 * @param node svg節點 => document.querySelector('svg')

 * @param name 生成的圖片名稱

 * @param width 生成的圖片寬度

 * @param height 生成的圖片高度

 * @param type 生成的圖片型別

 */

export const covertSVG2Image = (node, name, width, height, type = 'png') => {

      let serializer = new XMLSerializer()

      let source 
 
= '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node)

      let image = new Image()

 　　 image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source)

 　　 let canvas = document.createElement('canvas')

  　　canvas.width = width

 　　 canvas.height = height

 　　 let context 
 
= canvas.getContext('2d')

 　　 context.fillStyle = '#fff'

  　　context.fillRect(0, 0, 10000, 10000)

  　　image.onload = function () {

   　　 context.drawImage(image, 0, 0)

    　　let a = document.createElement('a')

    　　a.download = `${name}.${type}`

   　　 a.href = canvas.toDataURL(`image/${type}`)

   　　 a.click()

  　　}

}
 

  const [qrcode, setQrcode] = useState('')
　//匯出canvas繪製的二維碼，匯出格式為png
  const handleClickDownLoad = () => {
    let canvas = $('#qrCodeBox canvas')[0];
    setQrcode(canvas.toDataURL('image/png'));
  };

  <div className="qr-code" id="qrCodeBox">
  　　<QRCode
        renderAs="svg"//渲染格式為svg,預設為canvas
        value={"http://www.baidu.com"}//需要渲染為二維碼的連結地址
        size={180}//渲染出來的二維碼大小
     />
     <div onClick={() => covertSVG2Image($('#qrCodeBox svg')[0], '111', 180, 180)}>
        點選下載svg繪製的二維碼
     </div>
     <a onClick={handleClickDownLoad} download='二維碼' href={qrcode}>
        點選下載canvas繪製的二維碼
     </a>
  </div>