替换 HTML5 Canvas 上的颜色范围？

Question

我使用画布在照片上刻录的时间戳有问题。

目前，我将其着色为青色，然后应用差异过滤器来处理背景中的相似颜色。但是，当背景为灰色时，差异过滤器无法解决此问题，并且时间戳可能变得不可读。

是否可以在过滤器后仅在文本上查找一系列颜色并替换这些颜色？我正在考虑寻找一个灰色范围，然后用纯黑色或白色替换该范围。

我环顾四周，但似乎只能找到有关如何将这样的过滤器应用于整个图像的说明，而不仅仅是文本。

这是我现在做的一个例子，但在实际代码中我使用的是网络摄像头输入，所以图像绘制略有不同。

var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = draw;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function drawImage(img, x, y, filter) {
  ctx.beginPath()
  ctx.filter = filter
  ctx.drawImage(img, x, y);
  ctx.closePath()
}

ctx.globalCompositeOperation = "difference";
ctx.fillStyle = "cyan";
ctx.fillText("Hello World!", 150, 100);

function draw() {
  drawImage(image, 0, 0, 'none');
}

<canvas id="canvas" width=500></canvas>

Answer 1

很难准确判断您的情况。
...但这是一个想法，我们可以删除文本的“阴影”以使其弹出。
我要做的是把文本写两次，但有一点偏移

<canvas id="canvas" width=500></canvas>

<script>
    var pixelated = null
    var image = new Image();
    image.src = "http://i.stack.imgur.com/UFBxY.png";
    image.onload = draw;

    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");

    function drawImage(img, x, y, filter) {
        ctx.beginPath()
        ctx.filter = filter
        ctx.drawImage(img, x, y);
        ctx.closePath()
    }

    function drawText(text, x, y) {
        ctx.font = "60px Verdana";
        ctx.fillStyle = "black";
        ctx.fillText(text, x + 2, y + 2);
        ctx.fillStyle = "cyan";
        ctx.fillText(text, x, y);
    }

    function draw() {
        drawImage(image, 0, 0, 'blur(1px)');
        drawImage(image, 140, 0, 'none');
        drawText("Hello World!", 40, 80)
    }
</script>

以下是它的外观：

下面是两个：

---

而且我认为这对小字体也很有效，比：globalCompositeOperation = "difference";
这使它成为一个看起来很奇怪的文本......

这里是用小字体写的，两个偏移一个像素的文本

var image = new Image();
image.src = "http://i.stack.imgur.com/UFBxY.png";
image.onload = draw;

var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");

function drawImage(img, x, y) {
  ctx.beginPath()
  ctx.drawImage(img, x, y);
  ctx.closePath()
}

function drawText(text, x, y) {
    ctx.shadowColor = "black";
    ctx.shadowBlur = 2;
    ctx.fillStyle = "black";
    ctx.fillText(text, x + 1, y + 1);
    ctx.fillText(text, x - 1, y - 1);
    ctx.fillStyle = "cyan";
    ctx.fillText(text, x, y);
}

function draw() {
  drawImage(image, 0, 0);
  drawText("Hello World!", 10, 10);
  drawText("Hello World!", 50, 50);
  drawText("Hello World!", 150, 100);
  
}

<canvas id="canvas" width=500></canvas>