Safari下Canvas缩放后image-rendering:pixelated失效问题求助

我需要对Canvas进行放大和变换，在Chrome等浏览器中使用image-rendering: pixelated可实现清晰的像素化放大，但在Safari（macOS和iOS系统）中，Canvas仍会显示模糊。

兼容解决方案 #

1. 完善CSS渲染属性

Safari对标准pixelated属性的支持存在版本差异，需添加兼容前缀和兜底属性：

canvas {
  /* 现代浏览器标准像素化渲染 */
  image-rendering: pixelated;
  /* Safari 旧版本兼容属性 */
  image-rendering: -webkit-optimize-contrast;
  /* 兜底的像素化渲染 fallback */
  image-rendering: crisp-edges;
}

-webkit-optimize-contrast是Safari早期支持的像素化渲染属性，可覆盖旧版本的兼容问题。

2. 避免纯CSS缩放，同步调整Canvas原生尺寸

不要仅通过CSS缩放Canvas的显示尺寸，需同时设置Canvas的原生像素尺寸（DOM属性width/height）和CSS显示尺寸：

• 示例：若需将Canvas放大2倍显示，先设置canvas.width = 原画布宽度 * 2、canvas.height = 原画布高度 * 2，再通过CSS设置width: 目标显示宽度; height: 目标显示高度;，配合上述image-rendering属性，可彻底避免Safari的模糊问题。

3. 手动像素化绘制（终极兼容方案）

如果上述方法仍无效，可通过JS直接操作ImageData手动绘制缩放后的像素块，完全绕过浏览器渲染机制：

function scaleCanvas(canvas, scaleFactor) {
  const ctx = canvas.getContext('2d');
  const originalImageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const scaledWidth = canvas.width * scaleFactor;
  const scaledHeight = canvas.height * scaleFactor;
  
  const tempCanvas = document.createElement('canvas');
  tempCanvas.width = scaledWidth;
  tempCanvas.height = scaledHeight;
  const tempCtx = tempCanvas.getContext('2d');
  
  // 遍历原像素，绘制放大后的像素块
  for (let y = 0; y < canvas.height; y++) {
    for (let x = 0; x < canvas.width; x++) {
      const idx = (y * canvas.width + x) * 4;
      const [r, g, b, a] = originalImageData.data.slice(idx, idx + 4);
      tempCtx.fillStyle = `rgba(${r}, ${g}, ${b}, ${a / 255})`;
      tempCtx.fillRect(x * scaleFactor, y * scaleFactor, scaleFactor, scaleFactor);
    }
  }
  
  // 更新原画布尺寸并绘制缩放内容
  canvas.width = scaledWidth;
  canvas.height = scaledHeight;
  ctx.drawImage(tempCanvas, 0, 0);
}

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