Microsoft Edge不支持image-rendering: pixelated，如何用JS实现像素化渲染？

嘿，我完全懂你的困扰——Edge对image-rendering: pixelated的支持曾经确实是个让人头疼的问题，不过别担心，用JavaScript完全可以实现和它一致的像素化渲染效果。下面给你两种经过验证的靠谱方案：

方案一：Canvas 像素化渲染（推荐） #

这种方法利用Canvas的原生API关闭图像平滑，直接绘制并缩放图片，效果和image-rendering: pixelated几乎一模一样，而且Edge对Canvas的相关属性支持非常好。

实现步骤与代码示例： #

• 先获取目标图片元素，确保图片加载完成后再处理
• 创建Canvas元素，设置其宽高为图片的原始尺寸（保留像素细节）
• 关闭Canvas上下文的图像平滑功能
• 将原始图片绘制到Canvas，再缩放Canvas到目标显示大小
• 用Canvas替换原图片或插入到对应位置

function pixelateImage(imgElement, scale = 0.2) {
  // 创建Canvas元素
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
  
  // 设置Canvas为图片原始尺寸，保证像素信息不丢失
  canvas.width = imgElement.naturalWidth;
  canvas.height = imgElement.naturalHeight;
  
  // 关闭所有浏览器的图像平滑选项
  ctx.imageSmoothingEnabled = false;
  ctx.webkitImageSmoothingEnabled = false;
  ctx.msImageSmoothingEnabled = false;
  
  // 将原始图片绘制到Canvas
  ctx.drawImage(imgElement, 0, 0);
  
  // 缩放Canvas到目标显示大小
  canvas.style.width = `${imgElement.naturalWidth * scale}px`;
  canvas.style.height = `${imgElement.naturalHeight * scale}px`;
  
  // 替换原图片（如果需要保留原图片，可以改为插入到父容器中）
  imgElement.parentNode.replaceChild(canvas, imgElement);
}

// 使用示例：请确保图片id正确，且等待图片加载完成
const targetImage = document.getElementById('pixel-art');
// 处理图片加载完成事件
if (targetImage.complete) {
  pixelateImage(targetImage, 0.3); // scale值越小，像素化效果越明显
} else {
  targetImage.onload = () => pixelateImage(targetImage, 0.3);
}

优势： #

• 像素化效果精准，和CSS属性表现一致
• 支持动态调整缩放比例，灵活度高
• 兼容所有现代Edge版本，甚至旧版Edge也能正常工作

方案二：CSS+JS 辅助缩放（无需Canvas） #

如果你不想用Canvas，也可以通过CSS配合JS动态设置样式，利用旧Edge支持的-ms-interpolation-mode: nearest-neighbor属性实现像素化。

实现代码： #

首先定义CSS类：

.pixel-wrapper {
  /* 针对现代浏览器的属性 */
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  /* 旧Edge专属属性 */
  -ms-interpolation-mode: nearest-neighbor;
  /* 通过transform缩放容器 */
  transform: scale(0.1);
  transform-origin: top left;
  /* 避免容器溢出 */
  overflow: hidden;
}

.pixel-wrapper img {
  /* 将图片放大N倍，对应容器的缩放比例 */
  width: 1000%;
  height: auto;
  display: block;
}

然后用JS动态给图片添加容器：

function wrapPixelImage(imgElement, scale = 0.1) {
  // 创建容器元素
  const wrapper = document.createElement('div');
  wrapper.classList.add('pixel-wrapper');
  // 动态设置缩放比例
  wrapper.style.transform = `scale(${scale})`;
  // 计算图片放大倍数（1/scale）
  const imgScale = 1 / scale;
  imgElement.style.width = `${imgScale * 100}%`;
  
  // 将图片移入容器，再插入到原位置
  imgElement.parentNode.insertBefore(wrapper, imgElement);
  wrapper.appendChild(imgElement);
}

// 使用示例
const myImage = document.getElementById('pixel-art');
if (myImage.complete) {
  wrapPixelImage(myImage, 0.2);
} else {
  myImage.onload = () => wrapPixelImage(myImage, 0.2);
}

优势： #

• 无需Canvas，纯DOM操作
• 代码相对简洁，适合简单场景

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