Присвоить произвольный цвет монохромного изображения в браузере

Question

Допустим, у меня есть образ, который содержит только красные и прозрачные пикселы:

Теперь я хочу красные пиксели, чтобы показать, как любой цвет я выбираю , Возможно ли это с чем-то вроде -webkit-filter? Я уже знаю, как назначить ему произвольный оттенок() и как сделать его темнее (brightness(N%)), но сделать его легче (т. Е. Розовый) ускользает от меня. brightness(200%) не имеет видимого эффекта. Я также пытался начать с белого изображения, но я не могу его насытить.

Если есть библиотека JavaScript, которая преобразует любой гексаговый цвет в ряд фильтров CSS (или что-то еще, что выполняет эту задачу), это было бы оптимальным, но я сомневаюсь, что такая библиотека существует. Я могу написать сам, если смогу это понять.

Answer 1

Вы можете использовать холст, чтобы изменить цвет:

Для примера - только сухой изолированном кода, но корректировать по мере необходимости:

/// draw image onto canvas of same size as image 
ctx.drawImage(img, 0, 0); 

/// KEY: change composite mode 
ctx.globalCompositeOperation = 'source-in'; 

/// pick any color you want 
ctx.fillStyle = '#00f'; 

/// draw rectangle on top with fill style - only solid pixels will change 
ctx.fillRect(0, 0, canvas.width, canvas.height); 

Here is an online demo.

Композитный режим, используемый здесь, гарантирует, что заполнены только сплошные цвета; прозрачные пиксели будут оставаться прозрачными. Вы можете заполнить что-нибудь действительно, градиент, другое изображение и так далее.

По завершении этого действия вы можете либо использовать экранный холст as-is (он будет отображаться как изображение), либо вы можете получить данные-uri с холста, который вы можете установить как источник для другого элемента изображения используя 'canvas.toDataURL() `однако для этого последнего для работы вам необходимо выполнить требование CORS. Самое простое - использовать холст напрямую.

Answer 2

Вы пробовали фильтр opacity? Хотя это не совсем то, что вы можете (т.е. лёгкость фильтр), следующий дает мне розовый в описанной выше ситуации:

img { 
    -webkit-filter: opacity(30%); 
} 

Смотрите следующее: http://codepen.io/micjamking/pen/222c540689d92ec1df1a3b6e1ea2933f