DisplayP3vsRGB？如何正确使用色值？

　　大家好，很高兴又见面了，我是前端进阶，由我带着大家一起关注前端前沿、深入前端底层技术，大家一起进步，也欢迎大家关注、点赞、收藏、转发！
　　DisplayP3vssRGB？如何正确使用色值？前言
　　Web上使用的大多数颜色都是sRGB。比如熟悉的rrggbb、rgb（r，g，b）语法指定的CSS颜色，其各个颜色分量以〔0，255〕范围内的值表示。例如，rgb（255，0，0）是sRGB颜色空间中最饱和的纯红色。但是sRGB中的颜色范围，即色域（ColorGamut或ColorSpace），并不包含人类视觉系统可以感知的所有颜色，同时有些显示器可以产生更广泛的颜色范围。
　　sRGB（StandardRedGreenBlue）是由Microsoft影像巨擘共同开发的一种彩色语言协议，微软联合爱普生、HP惠普等提供一种标准方法来定义色彩，让显示、打印和扫描等各种计算机外部设备与应用软件对于色彩有一个共同的语言。
　　DisplayP3，饱和度明显高于sRGB的色彩
　　完全饱和的sRGB（左）和DisplayP3（右）圆锥渐变。在浏览器和支持DisplayP3显示器上查看，右颜色会比左颜色浓
　　如今，市场上有许多计算机、移动设备可以显示DisplayP3色域的所有颜色，并且Web平台在过去几年中一直在发展，以允许开发者充分利用这些显示器。
　　下图是在色度图上用三角形划出色彩空间所包含的色彩，明显能看出二者在包含色彩范围上的差别，即DisplayP3比sRGB范围更大。
　　图片来自：https：www。zcool。com。cnarticleZMTIyNjM2NA。html
　　WebKit自2016年一直支持宽色图像和视频，去年成为第一个实现CSSColorModuleLevel4中定义的新颜色语法的浏览器引擎，可以在给定的颜色空间中指定颜色。
　　目前为止，也就HTMLCanvas尚未支持广色域颜色。2DCanvasAPI在宽色域显示器普及之前就已引入，但是目前它只处理绘制和操作sRGB像素值。最近一项使用其他颜色空间创建Canvas上下文的提案被添加到HTML标准中，目前WebKit已经提供支持，而本文就从这里展开。1。DisplayP3特征检测浏览器支持
　　可以使用一些技术来检测宽色域显示和画布支持是否可用。1。1显示器支持
　　要检查显示器是否支持DisplayP3颜色需要使用色域媒体查询。functiondisplaySupportsP3Color（）｛returnmatchMedia（（colorgamut：p3））。matches；｝
　　目前matchMedia方法已经受到大多数浏览器的原生支持。从下图可知，Chrome从9版本就已提供这个方法。
　　matchMedia：媒体查询是否适用于文档的API1。2浏览器画布颜色空间支持
　　要检查浏览器是否支持宽色域画布，可以创建一个Canvas并检查生成的颜色空间。functioncanvasSupportsDisplayP3（）｛letcanvasdocument。createElement（canvas）；try｛如果支持colorSpace选项，但不满足DisplayP3支持的系统要求（最低macOS或iOS版本）Safari会抛出TypeError。letcontextcanvas。getContext（2d，｛colorSpace：displayp3｝）；returncontext。getContextAttributes（）。colorSpacedisplayp3；｝catch｛｝returnfalse；｝
　　如上所示，可以通过获取context。getContextAttributes（）。colorSpacedisplayp3的值来判断浏览器是否支持displayp3。1。3CSSColorModuleLevel4语法支持
　　检查浏览器是否支持在画布上指定宽色域颜色，可以直接设置颜色并查看浏览器是否支持。functioncanvasSupportsWideGamutCSSColors（）｛letcontextdocument。createElement（canvas）。getContext（2d）；letinitialFillStylecontext。fillStyle；context。fillStylecolor（displayp3010）；判断浏览器是否会忽略returncontext。fillStyle！initialFillStyle；｝2。在宽色域画布上绘制渲染上下文
　　Canvas的getContext方法接受一个选项来设置画布后备存储的颜色空间。canvasidcanvaswidth400height300canvas
　　默认颜色空间是sRGB（避免对现有内容进行颜色空间转换的性能开销），也可以使用displayp3。注意：可以使用任何受支持的CSS颜色语法指定填充和描边样式。letposition0；for（letgreenof〔1，0〕）｛for（letblueof〔1，0〕）｛for（letredof〔1，0〕）｛context。fillStylecolor（displayp3｛red｝｛green｝｛blue｝）；填充样式context。fillRect（position，position，40，40）；填充样式position20；｝｝｝
　　在sRGB（左）和显示P3（右）画布上用作填充样式的显示P3颜色。左侧的颜色被限制在sRGB色域内
　　任何使用画布颜色空间之外的颜色绘图都将被限制，以使其处于色域中。例如，在sRGB画布上用颜色（displayp3100）填充矩形最终将使用完全饱和的sRGB红色。同样，在DisplayP3画布上绘制颜色（rec20200。900。9），在Rec。2020色彩空间中几乎全是洋红色，即使用相近颜色（displayp31。000。923）来填充，因为这是DisplayP3色域中最相似的。constCOLORS〔0f0，color（displayp3010）〕；for（lety20；y180；y20）｛色域外采用相似颜色填充context。fillStyleCOLORS〔（y20）2〕；context。fillRect（20，y，160，20）；｝
　　sRGB（左）和DisplayP3（右）画布上交错的DisplayP3和sRGB条纹。因限制在色域内，两种绿色阴影在sRGB画布难区分
　　广色域颜色可用于所有Canvas绘图基元，比如：作为矩形、路径和文本的填充和描边渐变节点阴影颜色3。sRGB和DisplayP3中的像素操作
　　getImageData和putImageData可用于获取和设置宽色域画布上的像素值。默认情况下，getImageData将返回具有画布颜色空间中像素值的ImageData对象，但可以指定与画布不匹配的显式颜色空间，执行转换。letcontextcanvas。getContext（2d，｛colorSpace：displayp3｝）；context。fillStylecolor（displayp30。500）；context。fillRect（0，0，100，100）；letimageData；获取画布颜色空间（显示P3）中的ImageDataimageDatacontext。getImageData（0，0，1，1）；console。log（imageData。colorSpace）；displayp3console。log（〔。。。imageData。data〕）；〔128，0，0，255〕显式获取DisplayP3中的ImageDataimageDatacontext。getImageData（0，0，1，1，｛colorSpace：displayp3｝）；console。log（imageData。colorSpace）；displayp3console。log（〔。。。imageData。data〕）；〔128，0，0，255〕获取图像数据转换为sRGBimageDatacontext。getImageData（0，0，1，1，｛colorSpace：srgb｝）；console。log（imageData。colorSpace）；srgbconsole。log（〔。。。imageData。data〕）；〔141，0，0，255〕
　　ImageData构造函数同样采用带有colorSpace键的可选项对象。letcontextcanvas。getContext（2d，｛colorSpace：displayp3｝）；创建一个ImageData并用完整的DisplayP3黄色填充letimageDatanewImageData（10，10，｛colorSpace：displayp3｝）；for（leti0；i10104；i）imageData。data〔i〕〔255，255，0，255〕〔i4〕；context。putImageData（imageData，0，0）；
　　当使用不同颜色空间的颜色绘制形状时，ImageData和目标画布颜色空间之间的任何不匹配都会导致putImageData执行转换并可能限制生成的像素。4。序列化画布内容
　　CanvasDOM元素上的toDataURL和toBlob方法生成带有画布内容的光栅图像。constcanvasdocument。getElementById（canvas）；constdataURLcanvas。toDataURL（）；toDataURLcanvas。toBlob（（blob）｛｝，imagejpeg，0。95）；JPEGat95quality
　　在WebKit中，当在DisplayP3画布上调用时，这些方法会在生成的PNG或JPEG中嵌入适当的颜色配置文件，从而确保保留所有颜色范围。5。绘制宽色域图像
　　与putImageData一样，drawImage方法将在绘制颜色空间与画布颜色空间不同的图像时执行所需的任何颜色空间转换。
　　putImageData（imageData，dx，dy，dirtyX，dirtyY，dirtyWidth，dirtyHeight）putImageData方法drawImage（image，sx，sy，sWidth，sHeight，dx，dy，dWidth，dHeight）drawImage方法
　　img引用的光栅图像使用的任何颜色配置文件，以及视频（无论是视频文件还是WebRTC流）引用的视频中的任何颜色空间信息，都将在绘制到画布时得到恰当处理。这可确保在绘制到色彩空间与显示器（显示P3或sRGB）相匹配的画布时，源图像视频和画布像素看起来相同。6。总结
　　本文只是告诉大家什么是DisplayP3？为什么要使用DisplayP3？因为笔者不是这方面的专家，很多内容也就浅尝辄止。但是文末的参考资料提供了大量优秀文档以供学习，如果有兴趣可以自行阅读。参考资料
　　https：webkit。orgblog12058widegamut2dgraphicsusinghtmlcanvas
　　https：caniuse。com？searchmatchMedia
　　https：baike。baidu。comitemsRGB1350619？fraladdin
　　https：developer。aliyun。comarticle787589