在下载之前更改三纤维画布的大小答案

【问题标题】：Changing the size of a Three-Fiber Canvas before downloading it在下载之前更改三纤维画布的大小
【发布时间】：2022-01-28 04:42:26
【问题描述】：

我有一个关于三纤维的非常具体的问题。当您单击下载时，它会使用 toDataURL 创建一个 base64，然后您可以下载它。图像具有画布的高度和宽度，画布具有浏览器窗口的高度和宽度。如果浏览器窗口为 1024x768，则图像具有相同的大小。是否有可能无论画布的高度和宽度是多少，图像的高度和宽度都是 1920x1080 像素？我不知道如何实现。

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>
  )
}

【问题讨论】：

标签： javascript reactjs canvas three.js react-three-fiber

【解决方案1】：

HTMLCanvasElement 对象的.toDataUrl() 方法按原样返回画布，因此您无法直接更改其大小。

您可以做的是将画布的内容绘制到一个临时的 <canvas> 元素上，该元素的大小与您所需的分辨率相同，例如1920x1080。

然后在临时画布上执行 .toDataUrl。

这是一个例子：

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>

【讨论】：