[英]Can't access toDataUrl() using the useRef hook?
I'm generating a QRCode in my functional component. 我在功能组件中生成QRCode。 I want to copy the QRcode to clipbaord or download the QRcode.
我想将QRcode复制到clipbaord或下载QRcode。 Im passing a Ref into the QRCode component.
我将Ref传递到QRCode组件中。 But I can't use the ref.current.toDataUrl() inside my listener.
但是我不能在侦听器中使用ref.current.toDataUrl()。
React package - react-qrcode-logo React软件包-react-qrcode-logo
I tried with 2 different approaches. 我尝试了2种不同的方法。
2.downloadQR2() -> It says that toDataURL() is undefined for the ref. 2.downloadQR2()->表示未为引用定义toDataURL()。
console.log(containerRef.current) printed this on the console. console.log(containerRef.current)将此打印在控制台上。
const downloadQR2 = () => {
const canvas = containerRef.current;
console.log(canvas.toDataURL());
}
const downloadQR = () => {
const canvas = document.getElementById("canvas-id");
const pngUrl = canvas
.toDataURL("image/png")
.replace("image/png", "image/octet-stream");
let downloadLink = document.createElement("a");
downloadLink.href = pngUrl;
downloadLink.download = "QRcode.png";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
};
//Componenet
<QRCode id="canvas-id" ref={containerRef} value={url} logoImage={stackedLogo}/>
Im pretty new in React. 我在React中还很新。 Im lost on how to approach the task?
我对如何处理任务迷失了? Could anyone please share some insight or point me in the right direction?
任何人都可以分享一些见解或为我指出正确的方向吗?
The problem is containerRef.current
is QRCode
component. 问题是
containerRef.current
是QRCode
组件。 It is not canvas
. 它不是
canvas
。 As you can see from the log, canvas
is containerRef.current.canvas.current
. 从日志中可以看到,
canvas
是containerRef.current.canvas.current
。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.