cavnas.toDataURL() 不是函数

Question

我正在尝试从

react-qr-code

库下载生成的 QRCode，但我陷入了实际下载图像的步骤。

import QRCode from "react-qr-code";

我在 React 组件中生成 QRCode，如下所示：

return(
.
.
.
    <QRCode id="qrcode" level="H" value={box.id} size={100} />
    <Button onClick={downloadQRCode}>Download QR</Button>
);

我的下载功能：

 const downloadQRCode = () => {
    const canvas = document.getElementById("qrcode") as HTMLCanvasElement;
    if (!canvas) throw new Error("Canvas not found");
    const pngUrl = canvas
      .toDataURL("image/png")
      .replace("image/png", "image/octet-stream");
    let downloadLink = document.createElement("a");
    downloadLink.href = pngUrl;
    downloadLink.download = `${box.id}.png`;
    document.body.appendChild(downloadLink);
    downloadLink.click();
    document.body.removeChild(downloadLink);
  };

如果我在尝试

console.log(canvas)

之前

toDataURL

它就得到了正确的svg。 然而，当我运行

downloadQRCode

函数时，我得到的是：

Uncaught TypeError: canvas.toDataURL is not a function

Answer 1

我通过将库从

react-qr-code

切换到

qrcode.react

来让它工作，这似乎不是最好的库。

这让我可以使用

<QRCodeCanvas/>

和

<QRCodeSVG/>

元素。

使用评论中建议的

QRCodeCanvas

解决了这个问题。

<QRCodeCanvas id="qrcode" level="H" value={box.id} size={100} />
<Button onClick={downloadQRCode}>Download QR</Button>