Safari中从WebGL复制图像至2D Canvas时丢失Display-P3色彩配置文件

嘿，这个问题我之前帮朋友排查过，Safari在WebGL和2D Canvas的色彩空间交互上确实有个容易踩的坑！

首先得明确：Chrome和Safari对色彩空间的处理逻辑有差异，Chrome会自动保留WebGL画布的Display-P3信息，直接用drawImage就能正确传递，但Safari这边，当你把WebGL画布画到2D Canvas时，它默认会把WebGL的内容当成sRGB色彩空间来解析，哪怕两边都设置了Display-P3也没用。

结合你给出的代码片段，给你两个可行的解决思路：

思路一：用ImageData手动传递像素（适合小范围像素或全画布读取） #

既然你已经在用readPixels读取像素了，那可以直接基于读取到的像素数据创建带色彩空间的ImageData，再放到2D Canvas里。修改后的代码大概是这样：

function copyGLto2D() {
  const canvasGL = document.getElementById('webgl')
  const glP3 = canvasGL.getContext('webgl2');
  if (`drawingBufferColorSpace` in glP3) {
    glP3.drawingBufferColorSpace = 'display-p3';
    glP3.clearColor(1, 0, 0, 1);
    glP3.clear(glP3.COLOR_BUFFER_BIT);
  } 
  else return console.warn('browser does not support drawingBufferColorSpace')

  // 读取WebGL画布的像素（这里以读取1x1像素为例，全画布的话要对应修改尺寸）
  const pixelWidth = canvasGL.width;
  const pixelHeight = canvasGL.height;
  const pixelData = new Uint8Array(pixelWidth * pixelHeight * 4);
  glP3.readPixels(0, 0, pixelWidth, pixelHeight, glP3.RGBA, glP3.UNSIGNED_BYTE, pixelData);

  // 处理2D Canvas部分
  const canvas2D = document.getElementById('2dP3')
  const ctx2D = canvas2D.getContext('2d', { colorSpace: "display-p3" });
  
  // 关键：创建ImageData时指定Display-P3色彩空间
  const imageData = new ImageData(pixelData, pixelWidth, pixelHeight, { colorSpace: "display-p3" });
  ctx2D.putImageData(imageData, 0, 0);
}

这个思路的核心是绕过Safari对drawImage的色彩空间自动转换，直接把WebGL输出的P3像素原封不动地传递给2D Canvas，通过ImageData的colorSpace参数明确告诉浏览器这是P3的色彩数据。

思路二：强制2D Canvas在绘制时保留色彩空间（针对drawImage场景） #

如果你的场景是要直接复制整个WebGL画布而不是读取单个像素，那可以试试给2D Canvas的上下文设置imageSmoothingEnabled: false，同时确保在绘制前WebGL画布已经正确完成P3渲染。不过这个方法在部分旧版Safari里可能不稳定，更推荐思路一。

另外还要注意：

• 确保你的Safari版本在15.4及以上，更早的版本根本不支持2D Canvas的colorSpace参数和WebGL的drawingBufferColorSpace
• 测试时可以用系统取色器工具，对比WebGL画布和2D Canvas的红色是否一致（Display-P3的纯红比sRGB的纯红饱和度更高）

备注：内容来源于stack exchange，提问作者Alex River