Tengo una pregunta muy específica sobre Three Fiber. Cuando hace clic en descargar, crea un base64 usando toDataURL que luego puede descargar. La imagen tiene la altura y el ancho del lienzo y el lienzo tiene la altura y el ancho de la ventana del navegador. Si la ventana del navegador es de 1024x768, la imagen tiene el mismo tamaño. ¿Es posible que no importa cuál sea la altura y el ancho del lienzo, la imagen tiene la altura y el ancho de 1920x1080 píxeles? No tengo idea de cómo implementar esto.
export default function Home() { const canvas = useRef() const [downloadDatei, setDownloadDatei] = useState('') const downloadCanvas = () => { const download = canvas.current.toDataURL('image/jpeg', ); setDownloadDatei(download) } return ( <div className="mitte"> <section className="canvasSection"> <Canvas ref={canvas} className="canvas" shadows linear camera={{ position: [10, 0, 80], fov: 45 }} > <Suspense fallback={false}> <Content /> </Suspense> </Canvas> </section> <button > <a href={downloadDatei} download='test.jpg' onClick={() => downloadCanvas()}> Download </a> </button> </div> ) }El método .toDataUrl() de un objeto HTMLCanvasElement devuelve el lienzo tal como está, por lo que no puede cambiar su tamaño directamente.
En cambio, lo que puede hacer es dibujar el contenido de su lienzo en un elemento temporal <canvas> del tamaño de la resolución deseada, por ejemplo, 1920x1080.
Luego ejecute .toDataUrl en el lienzo temporal.
Aquí hay un ejemplo:
let canvas = document.getElementById("canvas"); let ctx = canvas.getContext("2d"); ctx.fillStyle = "green"; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.beginPath(); ctx.lineWidth = 10; ctx.arc(canvas.width / 2, canvas.height / 2, 50, 0, 2 * Math.PI); ctx.stroke(); function downloadCanvas() { let tempCanvas = document.createElement("canvas"); tempCanvas.width = 1920; tempCanvas.height = 1080; let tempContext = tempCanvas.getContext("2d"); tempContext.drawImage(canvas, 0, 0, tempCanvas.width, tempCanvas.height) const download = tempCanvas.toDataURL('image/jpeg'); document.querySelectorAll("a")[0].href = download; } <canvas id="canvas" width="320" height="180"></canvas><br> <a href="" download='test.jpg' onClick=" downloadCanvas()">Download</a>