Можно ли перекрасить изображение с помощью карты градиента в HTML5 или CSS3?

Question

Можно ли перекрасить изображение с помощью карты градиента в HTML5 или CSS3?

Можно ли перекрасить изображение с помощью карты градиента в HTML5 или CSS3? Я также открыт для использования библиотек JavaScript.

Я следовал за этим вопросом, но это только оттенки серого и корректировка значений rgb: Как я могу использовать карту градиента для тонирования холста HTML5 с изображением на холсте.

С помощью этой техники невозможно по-настоящему назначить градиент, чтобы перекрасить изображение. Кто-нибудь с любыми рекомендациями, пожалуйста, отправьте их таким образом!

Я включил ссылку на изображение эффекта, созданного с помощью графического редактора, чтобы лучше объяснить эффект незнакомым людям:

http://www.imagesincontext.com/IICFeatures/GradientMap.gif

Спасибо!

3

javascript html5 css3 gradient grayscale

Источник

user2402678 20 май '13 в 18:16

3 ответа

Другие вопросы по тегам javascript html5 css3 gradient grayscale

user1654984 20 май '13 в 18:35 2013-05-20 18:35 · Answer 1 · 2013-05-20 18:35

Вы можете использовать свойства фильтра изображений CSS здесь я прикрепил ссылку

http://html5-demos.appspot.com/static/css/filters/index.html

2

Источник

user1654984 20 май '13 в 18:35

user2283678 20 май '13 в 18:21 2013-05-20 18:21 · Answer 2 · 2013-05-20 18:21

Там нет ничего встроенного, что сделает это для вас.

Вы можете, однако, сделать некоторую постобработку изображения, используя JavaScript.

Вот отличная ссылка на эту тему:

Работа с изображениями с помощью Canvas

По сути, вы получите доступ к пикселям через getImageData() и измените его с помощью putImageData(). Подобный пример можно увидеть по ссылке, размещенной выше.

user5651 16 мар '17 в 18:56 2017-03-16 18:56 · Answer 3 · 2017-03-16 18:56

Существует замечательная библиотека градиентных файлов.js*, которая прекрасно справляется с этим.

<img id="myimage" src="photo.jpg">

<script src="gradientmaps.min.js"></script>
<script>
  var target = document.getElementById('myimage');
  var gradientMap = "blue, green, yellow";

  GradientMaps.applyGradientMap(target, gradientMap);
</script>

Этот скрипт преобразует ваш список цветов в соответствующий код фильтра SVG. Затем он генерирует <svg> элемент. Он присваивает уникальный идентификатор <filter> элемент, а затем применяет этот фильтр к вашему элементу DOM.

После выполнения приведенного выше примера, DOM изменится, чтобы выглядеть следующим образом....

<svg version="1.1" width="0" height="0">
  <filter id="filter-1489690359932">
    <feColorMatrix type="matrix" values="0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0.2126 0.7152 0.0722 0 0 0 0 0 1 0" result="gray"></feColorMatrix>
    <feComponentTransfer color-interpolation-filters="sRGB">
      <feFuncR type="table" tableValues="0 0 1"></feFuncR>
      <feFuncG type="table" tableValues="0 0.5019607843137255 1"></feFuncG>
      <feFuncB type="table" tableValues="1 0 0"></feFuncB>
      <feFuncA type="table" tableValues="1 1 1"></feFuncA>
    </feComponentTransfer>
  </filter>
</svg>
<img id="myimage" src="photo.jpg" 
     data-gradientmap-filter="filter-1489690359932" 
     style="filter: url(&quot;#filter-1489690359932&quot;);">

* Я связался с моим форком этого проекта, который добавляет поддержку IE / Edge.