Windows开启缩放时，如何在VSCode的Jupyter Notebook中清晰渲染图像？

核心问题原因 #

VS Code的Jupyter Notebook基于Chromium渲染引擎，默认对小图像进行平滑插值缩放，叠加Windows 11的150%高DPI系统缩放后，会导致像素风格的图像边缘模糊，无法实现1:1像素对应或清晰的整数缩放效果。

解决方案：用HTML强制像素化渲染（内存内处理） #

通过将图像转为内存中的Base64编码，嵌入HTML的<img>标签并设置强制像素化的渲染样式，绕过Notebook默认的平滑缩放逻辑，实现清晰的像素显示。如果需要整数缩放，提前用最近邻算法放大图像即可。

完整代码示例 #

from PIL import Image
import numpy as np
import io
import base64
from IPython.display import HTML

# 生成黑白像素数组
bw_data = np.array([
    [0, 1, 0, 1],
    [1, 0, 1, 0],
    [0, 1, 0, 1],
    [1, 0, 1, 0]
], dtype=np.uint8)

# 转换为1位黑白图像
bw_image = Image.fromarray(bw_data * 255).convert(mode='1')

# 可选：按整数倍缩放（适配150%系统缩放，选3倍为1.5的整数倍），使用最近邻插值
scale_factor = 3
scaled_image = bw_image.resize(
    (bw_image.width * scale_factor, bw_image.height * scale_factor),
    Image.Resampling.NEAREST  # Pillow 9.1+用此写法，旧版本替换为Image.NEAREST
)

# 将图像保存到内存缓冲区
buf = io.BytesIO()
scaled_image.save(buf, format='PNG')
buf.seek(0)
# 转为Base64编码
img_base64 = base64.b64encode(buf.getvalue()).decode('utf-8')

# 用HTML标签显示，强制像素化渲染
display(HTML(f'''
<img 
    src="data:image/png;base64,{img_base64}" 
    style="image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;"
>
'''))

关键说明 #

1. 像素化渲染样式：image-rendering: pixelated等属性强制浏览器使用最近邻插值，确保缩放时像素边缘清晰无模糊。
2. 内存内处理：使用io.BytesIO和Base64编码，无需将图像保存到本地磁盘，符合内存优先的需求。
3. 整数缩放适配：针对150%系统缩放，选择3倍缩放（1.5的整数倍），可实现源图像1像素对应屏幕3像素的清晰映射；如果需要1:1屏幕像素，可根据实际DPI缩放比例调整scale_factor。

备选方案：调整VS Code全局设置 #

如果希望全局生效，可修改VS Code设置：

• 打开设置（Ctrl+,），搜索jupyter.imageScaleFactor
• 设置为整数（比如3），同时确保VS Code的高DPI缩放设置为System (Enhanced)或100%（后者可能导致界面过小）

注意：全局设置会影响所有Notebook图像，不如HTML方法灵活精准。

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