Three.js/WebGL导出Canvas图像时如何设置正确的绘图缓冲区尺寸？

核心问题出在你没有正确设置Three.js WebGLRenderer的绘图缓冲区尺寸——这个尺寸决定了Canvas内部的像素分辨率，和CSS设置的显示尺寸是完全独立的两个概念。你之前只通过CSS控制了Canvas的显示大小，但没给Renderer指定对应原始图像的400x400分辨率，导致它默认使用了浏览器自带的Canvas内部尺寸300x150。

下面是具体的解决步骤和修正后的代码：

1. 初始化时设置Renderer的正确尺寸 #

在创建WebGLRenderer实例后，一定要调用setSize()方法指定你需要的原始分辨率（400x400），这会同步设置Canvas的内部绘图缓冲区尺寸：

var c1 = $("#mainCanvas").get(0);
// 初始化Renderer，开启preserveDrawingBuffer以便后续导出
renderer = new THREE.WebGLRenderer({canvas: c1, preserveDrawingBuffer: true});
// 关键操作：设置绘图缓冲区为原始图像尺寸400x400
renderer.setSize(400, 400);

完成这一步后，你依然可以通过CSS让Canvas显示为300x500的竖屏样式，这不会影响内部的像素分辨率。

2. 正确导出图像或像素数据 #

方法一：直接用Renderer导出（推荐） #

因为你已经开启了preserveDrawingBuffer: true，可以直接通过Renderer的DOM元素调用toDataURL()，拿到的就是400x400的图像数据：

var dataURL = renderer.domElement.toDataURL('image/png');
// 可以把dataURL转换成图片元素，或者直接生成下载链接

方法二：读取像素数据 #

如果一定要用readPixels，现在drawingBufferWidth和drawingBufferHeight已经是400了，能正确获取到原始尺寸的像素数据：

var context = renderer.getContext(); // 直接从Renderer拿上下文更可靠
var pixels = new Uint8Array(400 * 400 * 4);
context.readPixels(0, 0, 400, 400, context.RGBA, context.UNSIGNED_BYTE, pixels);

修正后的完整代码示例 #

CSS（保持不变，仅控制显示尺寸） #

.canvas { width: 300px; height: 500px; background-color: #352a87; }

JavaScript（添加Renderer尺寸设置） #

var c1 = $("#mainCanvas").get(0);
renderer = new THREE.WebGLRenderer({canvas: c1, preserveDrawingBuffer: true});
// 设置原始图像分辨率
renderer.setSize(400, 400);

// 你的场景创建、绘图代码（省略）

// 导出图像
var dataURL = renderer.domElement.toDataURL();
// 或者读取像素数据
var context = renderer.getContext();
var pixels = new Uint8Array(context.drawingBufferWidth * context.drawingBufferHeight * 4);
context.readPixels(0, 0, context.drawingBufferWidth, context.drawingBufferHeight, context.RGBA, context.UNSIGNED_BYTE, pixels);

补充说明 #

• 浏览器默认的Canvas内部尺寸是300x150，这就是你之前拿到drawingBufferWidth=300的原因
• setSize()方法有第二个可选参数updateStyle，默认值为true——它会同时设置Canvas的CSS样式宽高，所以如果你需要CSS显示尺寸和内部分辨率不同，要么手动覆盖CSS样式，要么把updateStyle设为false：

  renderer.setSize(400, 400, false);
  

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