Заменить гамму цветов на 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>