我正在使用組件react-stl-obj-viewer來渲染 3d stl 圖像。我可以正確渲染 3d stl 圖像。渲染圖像后,我會(huì)嘗試移動(dòng)它并有一個(gè)按鈕來截取它的屏幕截圖。<div> <STLViewer onSceneRendered={(element) => { console.log(element); }} sceneClassName="test-scene" file={this.state.selectedFile} modelColor="#073FE9" /></div><div style={{ display: "inline-block" }}> <Button id="thumbnail" style={{ zIndex: "-1", margin: "20px 0px 20px 0px" }} onClick={(e) => { this.save3dRender(e, webGlContextExists); }} > Save Frame as Thumbnail </Button> {!this.state.showThumbnail ? ( <Container> <h2>Did you get this image</h2> <Image src={this.state.thumbnailFile} /> </Container> ) : null}</div>為了獲取圖像的屏幕截圖,我嘗試使用 .toDataURL("image/png")。我的按鈕在按下時(shí)會(huì)執(zhí)行此操作。 save3dRender = (e, geeL) => { e.preventDefault(); var testThumbnail = geeL.canvas.toDataURL("image/png"); this.state.thumbnailFile = testThumbnail; this.state.thumbnailFileRender = true; this.state.showThumbnail = false; };我對此有些陌生,但認(rèn)為我走在正確的軌道上。由于 STLViewer 組件正在創(chuàng)建畫布,我試圖通過 .canvas 以這種方式訪問它。不確定這是否正確,但我確實(shí)得到了一個(gè) data:image/png;base64 地址。然而,它是一個(gè)空白圖像。我訪問的是正確的畫布嗎?在將圖像作為 data:/image/png;base64 后,我需要對圖像做些什么嗎?
使用 react-stl-obj-viewer 組件時(shí)如何訪問畫布以獲取屏幕截圖
青春有我
2022-12-09 17:13:20