javascript - HTML5 Canvas 色调旋转改变饱和度和亮度

Question

我正在开发一个相对简单的应用程序，它将生成同一 .SVG 图像的不同颜色版本(由 HSL 值修改)。

现在我正在实现色调更改。我正在使用生成的颜色列表。在绘制颜色变化之前，选择一种基色。在这种情况下，我使用了一个非常简单的绿色方 block .SVG (hsl(137,100%,82%))。

我的代码是这样的:

for(let i = 0; i < nColors; i++){
                    ctx.filter = 'hue-rotate('+(palette[i].h-hStart)+'deg)';  
                    ctx.drawImage(img, i*100, 0, 100, 100);      
                    ctx.filter = "none";            
                }

哪里:

• nColors 是数组中的颜色数量

• palette 是一组具有属性 h、s 和 l 的对象 - 包含颜色

• hStart 是我图像的基色(在本例中为 137)

我正在计算当前颜色和基色之间的色相差异，并按该数字旋转 Canvas 绘图色相，然后并排绘制正方形。不幸的是，here are my results .

顶部的列表包含我想要强加到我的 .SVG 上的实际颜色，底部的方 block 是我的 Canvas 。

如您所见，颜色随着每次迭代的变化越来越多。我已经在 Photoshop 中检查了确切的颜色(我知道 Photoshop 使用 HSB 但我转换了值)并且 S&L 差异确实很大并且有些规则(第一个是正确的)。

1. 100,82
2. 100,82
3. 100,89
4. 83,100
5. 52,100
6. 53,100
7. 60,100
8. 62,100

现在，我确实在某处读到不同的浏览器可能会呈现不同的颜色，所以我用 getPixelData 检查了颜色，结果与我的 Photoshop 读数相匹配，因此我相信问题确实出在色调旋转滤镜上。

我可以通过读取所有像素数据并“手动”更改它来获得相同的结果，但最后我想将每个新图像绘制到一个不可见的大 Canvas 上并导出高分辨率 .PNG - 它会相当 CPU 密集型并且需要很长时间。

它实际上是 hue-rotate 的错误/功能还是我在某处犯了错误？有什么办法可以解决吗？有没有其他方法可以实现相同的结果，同时保持相对简单并坚持使用向量？

编辑:here's a fiddle

Answer 1

这不是真正的错误。

Canvas 2DContext 的 filter = CSSFilterFunc 将产生与 CSS filter: CSSFilterFunc 和 hue-rotate(angle) 函数相同的结果只近似此色调旋转:它不会将所有 RGBA 像素转换为它们的 HSL 值。所以是的，你会得到错误的结果。

但是，您可以尝试使用 SVGFilterMatrix 来近似计算。原始的 hue-rotate 将产生与 CSSFunc 类似的结果，但我们可以计算色调旋转并将其应用于 colorMatrix。
如果您想编写它，这里有一篇解释如何编写的论文:http://www.graficaobscura.com/matrix/index.html

我现在真的没有时间去做，所以我会借用一个已经写好的 js 实现，它比这个 Q/A 中的默认实现更好。 , 由 pixi.js 撰写配合，并且只会向您展示如何将它应用到您的 Canvas 上，这要归功于 SVGFilter。

请注意，正如@RobertLongson 所指出的那样，您还需要设置 color-interpolation-filters feColorMatrix 元素的属性设置为 sRGB，因为它默认为 linear-sRGB。

// set our SVGfilter's colorMatrix's values
document.getElementById('matrix').setAttribute('values', hueRotate(100));

var cssCtx = CSSFiltered.getContext('2d');
var svgCtx = SVGFiltered.getContext('2d');
var reqctx = requiredRes.getContext('2d');
cssCtx.fillStyle = svgCtx.fillStyle = reqctx.fillStyle = 'hsl(100, 50%, 50%)';
cssCtx.fillRect(0, 0, 100, 100);
svgCtx.fillRect(0, 0, 100, 100);
reqctx.fillRect(0, 0, 100, 100);

// CSSFunc
cssCtx.filter = "hue-rotate(100deg)";
// url func pointing to our SVG Filter
svgCtx.filter = "url(#hue-rotate)";

reqctx.fillStyle = 'hsl(200, 50%, 50%)';

cssCtx.fillRect(100, 0, 100, 100);
svgCtx.fillRect(100, 0, 100, 100);
reqctx.fillRect(100, 0, 100, 100);

var reqdata = reqctx.getImageData(150, 50, 1, 1).data;
var reqHSL = rgbToHsl(reqdata);
console.log('required result : ', 'rgba(' + reqdata.join() + '), hsl(' + reqHSL + ')');
var svgData = svgCtx.getImageData(150, 50, 1, 1).data;
var svgHSL = rgbToHsl(svgData);
console.log('SVGFiltered : ', 'rgba(' + svgData.join() + '), , hsl(' + svgHSL + ')');
// this one throws an security error in Firefox < 52 
var cssData = cssCtx.getImageData(150, 50, 1, 1).data;
var cssHSL = rgbToHsl(cssData);
console.log('CSSFiltered : ', 'rgba(' + cssData.join() + '), hsl(' + cssHSL + ')');


// hueRotate will create a colorMatrix with the hue rotation applied to it
// taken from https://pixijs.github.io/docs/filters_colormatrix_ColorMatrixFilter.js.html
// and therefore from https://stackoverflow.com/questions/8507885/shift-hue-of-an-rgb-color/8510751#8510751
function hueRotate(rotation) {
  rotation = (rotation || 0) / 180 * Math.PI;
  var cosR = Math.cos(rotation),
    sinR = Math.sin(rotation),
    sqrt = Math.sqrt;

  var w = 1 / 3,
    sqrW = sqrt(w);
  var a00 = cosR + (1.0 - cosR) * w;
  var a01 = w * (1.0 - cosR) - sqrW * sinR;
  var a02 = w * (1.0 - cosR) + sqrW * sinR;
  var a10 = w * (1.0 - cosR) + sqrW * sinR;
  var a11 = cosR + w * (1.0 - cosR);
  var a12 = w * (1.0 - cosR) - sqrW * sinR;
  var a20 = w * (1.0 - cosR) - sqrW * sinR;
  var a21 = w * (1.0 - cosR) + sqrW * sinR;
  var a22 = cosR + w * (1.0 - cosR);
  var matrix = [
    a00, a01, a02, 0, 0,
    a10, a11, a12, 0, 0,
    a20, a21, a22, 0, 0,
    0, 0, 0, 1, 0,
  ];
  return matrix.join(' ');
}

function rgbToHsl(arr) {
  var r = arr[0] / 255,
    g = arr[1] / 255,
    b = arr[2] / 255;
  var max = Math.max(r, g, b),
    min = Math.min(r, g, b);
  var h, s, l = (max + min) / 2;

  if (max == min) {
    h = s = 0;
  } else {
    var d = max - min;
    s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
    switch (max) {
      case r:
        h = (g - b) / d + (g < b ? 6 : 0);
        break;
      case g:
        h = (b - r) / d + 2;
        break;
      case b:
        h = (r - g) / d + 4;
        break;
    }
    h /= 6;
  }
  return [
    Math.round(h * 360),
    Math.round(s * 100),
    Math.round(l * 100)
  ];
}

body{ margin-bottom: 100px}

<!-- this is our filter, we'll add the values by js -->
<svg height="0" width="0">
  <filter id="hue-rotate">
    <feColorMatrix in="SourceGraphic" id="matrix" type="matrix" color-interpolation-filters="sRGB" />
  </filter>
</svg>
<p>CSS Filtered :
  <br>
  <canvas id="CSSFiltered" width="200" height="100"></canvas>
</p>
<p>SVG Filtered :
  <br>
  <canvas id="SVGFiltered" width="200" height="100"></canvas>
</p>
<p>Required Result :
  <br>
  <canvas id="requiredRes" width="200" height="100"></canvas>
</p>