HTML函数工具在HDR显示器上显示异常时，需依次验证系统HDR启用、浏览器HDR兼容性、Canvas上下文HDR就绪性、CSS色空间声明及输出元数据完整性。
如果您在使用HTML函数工具时发现色彩显示异常、亮度层次丢失或对比度不足，可能是由于工具未针对HDR显示器进行适配。以下是验证与调整HTML函数工具在HDR显示器上表现的具体步骤：
一、确认系统级HDR启用状态
HTML函数工具本身不直接控制HDR输出，但其渲染效果依赖于操作系统对HDR的底层支持。若系统未开启HDR模式，所有Web内容（包括内嵌函数调用的Canvas或SVG渲染）均以SDR方式呈现，导致高光细节压缩、色域映射失真。
1、在Windows 10/11中，进入“设置 > 系统 > 显示”，向下滚动至“Windows HD Color设置”。
2、检查“使用HDR”开关是否处于开启状态，并确认当前显示器已标识为“支持HDR10”。
立即学习“前端免费学习笔记（深入）”；
3、点击“HDR校准”按钮，按向导完成白点、亮度与对比度的逐项匹配，确保系统色彩空间切换无延迟。
二、检测浏览器HDR兼容性与标志启用
HTML函数工具运行于浏览器环境中，其是否能利用HDR需依赖浏览器对Display P3色域、Rec.2020元数据及全屏HDR Canvas的支持。部分浏览器需手动启用实验性功能才能解锁HDR渲染能力。
1、在Chrome地址栏输入chrome://flags/#enable-hdr-rendering，将该选项设为“Enabled”。
2、重启浏览器后，在开发者工具（F12）的Console中执行：window.matchMedia('(dynamic-range: high)').matches，返回true表示环境已识别HDR。
3、若使用Edge，访问edge://flags/#enable-hdr-video并启用对应标志，同时确保“允许网站控制HDR模式”在隐私设置中已勾选。
三、验证HTML函数调用的Canvas上下文HDR就绪性
当HTML函数工具涉及图像处理、图表绘制或WebGL计算时，必须显式请求HDR-capable渲染上下文，否则即使系统启用HDR，Canvas仍默认使用sRGB帧缓冲，造成亮度值截断与gamma错误。
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
1、在初始化Canvas时，传入{colorSpace: 'display-p3', alpha: true}作为getContext参数，例如：const ctx = canvas.getContext('2d', {colorSpace: 'display-p3'});
2、对WebGL上下文，创建时添加{colorSpace: 'display-p3', premultipliedAlpha: false}，并在着色器中使用highp float处理线性光值。
3、调用HTML函数前，检查canvas.style.imageRendering是否设为'pixelated'，避免浏览器自动应用SDR色调映射滤镜。
四、校验CSS媒体查询与颜色空间声明
HTML函数工具的UI组件若依赖CSS变量或渐变生成，其颜色定义必须脱离sRGB假设，否则在HDR显示器上会因未声明色空间而强制降级为sRGB输出，丢失P3色域覆盖范围。
1、在CSS中使用color(display-p3 0.8 0.2 0.1)替代hex或rgb()语法，确保颜色值直通P3色域。
2、为关键元素添加媒体查询：@media (dynamic-range: high) { .chart-bg { background: color(display-p3 0.1 0.1 0.1); } }。
3、禁用所有含-webkit-app-region或filter: brightness()的样式规则，此类属性在HDR下会触发隐式SDR合成路径。
五、测试HTML函数输出的HDR元数据完整性
部分HTML函数（如视频帧提取、HDR图像编码器）需嵌入SEI消息或传输特性描述符。若输出文件缺失Rec.2100 PQ或HLG元数据，播放端无法激活HDR解码链路，导致内容始终以SDR方式解码。
1、使用ffprobe -v quiet -show_entries stream=color_space,color_transfer,color_primaries video.mp4检查输出流是否包含bt2020nc与smpte2084字段。
2、在Canvas.toDataURL()调用前，插入canvas.toBlob(callback, 'image/png', {colorSpace: 'display-p3'})确保导出PNG携带cICP原子。
3、若函数生成WebP，验证是否启用{quality: 100, effort: 1, enable_exif: true}参数组合，防止元数据剥离。
