反应 canvas 对 blob 的引用？

Question

所以我想要一个 canvas 元素作为反应中的一个 blob，用本地打印机打印它。请不要介意所有打印机逻辑。它成功地将 canvas 打印为反应元素，因此我不认为它与 canvas 本身有任何关系。

export const barcode = (props) => {

const canvasReference = useRef(null)
const [loaded, setLoaded] = useState(false)

useEffect(() => {
  //creates the canvas with content
  bwipjs.toCanvas('barcode', ...)
  setLoaded(true)
}

if(setLoaded) {
  window.Printer.init(
    (printer) => { 
      canvasReference.toBlob((blob) => { // <-- FAILS
         printer.printBlob(
           blob,  
           (msg) => {
             console.log('yay')  
           },
           (error) => {
             console.error(error)  
           }
            
         }
      }
    }, 
    (error) => { 
      console.error(error)
    }
}
return <canvas ref={canvasReference} id="barcode" />
}

TypeError: canvasReference.toBlob is not a function

如果我尝试获取 canvasReference 的属性，它会确认它不具有 HTMLCanvasElement.toBlob() https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob.

的等价物

我怎样才能让我的 canvas 成为一个具有 React 的 blob？

Answer 1

useRef 挂钩的引用存储在 current 属性中。

canvasReference.current.toBlob()

Answer 2

您需要访问.current才能访问DOM节点。 https://reactjs.org/docs/refs-and-the-dom.html#accessing-refs

反应 canvas 对 blob 的引用？

react canvas reference to blob?

javascript

blob

canvas

reactjs