如何通过expo-three将Canvas生成的图像保存至缓冲区或存储？

一、Expo-Three 图像保存到缓冲区/存储（无需截屏） #

Expo-Three 基于 Three.js，可直接从渲染上下文获取像素数据，完全不需要依赖系统截屏功能，以下是两种核心实现方式：

1. 生成Base64格式数据（适合存储或快速传输） #

通过渲染器的 toDataURL() 方法直接导出图像的Base64编码，可直接保存到本地存储或转为缓冲区：

import * as THREE from 'three';
import { ExpoTHREE } from 'expo-three';
import * as FileSystem from 'expo-file-system';

// 初始化场景、相机、渲染器（示例基础代码）
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);
const renderer = ExpoTHREE.createRenderer({ antialias: true });
renderer.setSize(width, height);

// 渲染场景到画布
renderer.render(scene, camera);

// 获取Base64格式的图像数据
const base64Image = renderer.domElement.toDataURL('image/png');

// 保存到本地存储
async function saveToStorage() {
  // 剥离Base64头部，只保留编码内容
  const rawBase64 = base64Image.split(',')[1];
  const savePath = `${FileSystem.documentDirectory}rendered-scene.png`;
  await FileSystem.writeAsStringAsync(savePath, rawBase64, {
    encoding: FileSystem.EncodingType.Base64
  });
  console.log('图像已保存至:', savePath);
}
saveToStorage();

2. 获取原始像素缓冲区（适合图像数据处理） #

使用 readPixels() 读取GPU渲染后的原始像素数据，得到Uint8Array格式的缓冲区，可用于后续图像算法处理：

// 假设已初始化renderTarget（可选，若需离屏渲染）
const renderTarget = new THREE.WebGLRenderTarget(width, height);
renderer.setRenderTarget(renderTarget);
renderer.render(scene, camera);

// 创建像素缓冲区（RGBA四通道，每个像素占4字节）
const pixelBuffer = new Uint8Array(width * height * 4);
// 读取渲染目标的像素数据
renderer.readRenderTargetPixels(renderTarget, 0, 0, width, height, pixelBuffer);

// 可将缓冲区转为Blob用于上传或进一步处理
const imageBlob = new Blob([pixelBuffer], { type: 'image/png' });

二、浏览器截取Canvas的原理与实现 #

Chrome等浏览器的Canvas截取功能并非从头构建图像数据，而是直接读取Canvas渲染上下文已生成的像素缓冲区，本质和上面的方法一致，核心是利用Canvas API的原生能力：

1. 2D Canvas截取实现 #

对于普通2D画布，使用 getImageData() 读取像素数据，或 toDataURL() 导出图像：

const canvas = document.querySelector('#my-2d-canvas');
const ctx = canvas.getContext('2d');

// 渲染内容后执行
// 方法1：获取原始像素缓冲区
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const pixelArray = imageData.data; // Uint8ClampedArray格式，包含RGBA数据

// 方法2：生成Base64图像
const base64 = canvas.toDataURL('image/jpeg', 0.9); // 第二个参数为压缩质量

2. WebGL Canvas截取实现 #

对于WebGL画布（和Expo-Three底层一致），通过WebGL上下文的 readPixels() 读取像素：

const canvas = document.querySelector('#my-webgl-canvas');
const gl = canvas.getContext('webgl');

// 读取像素数据（注意WebGL坐标系原点在左下角，需翻转才能得到正常方向的图像）
const pixelBuffer = new Uint8Array(gl.drawingBufferWidth * gl.drawingBufferHeight * 4);
gl.readPixels(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight, gl.RGBA, gl.UNSIGNED_BYTE, pixelBuffer);

// 若需要转为可显示的图像，可手动翻转像素或借助Three.js的工具方法处理

这些方法直接从GPU获取已渲染的像素结果，避免了截屏带来的窗口遮挡、分辨率不匹配等问题，效率和准确性都远高于系统截屏。

内容的提问来源于stack exchange，提问作者John Travolte