Сохранение изображения с применением эффектов оттенка CSS

#javascript #html #css

#javascript #HTML #css

Вопрос:

У меня есть простой код, который анимирует изображение / gif, чтобы оно выглядело как радуга. Однако, очевидно, что это не сохраняет изображение таким образом, если вы его загружаете, оно сохраняет исходный gif. Вот пример того, что я имею в виду:

 .huerotate {
  animation: rainbow 2.5s linear;
    animation-iteration-count: infinite;
}

@keyframes rainbow {
 from {
    -webkit-filter:hue-rotate(0deg);
      filter:hue-rotate(0deg);
    }
  to {
    -webkit-filter:hue-rotate(360deg);
      filter:hue-rotate(360deg);
    }
} 
  <img class="huerotate" src="https://emoji.gg/assets/emoji/7274_crabrave.gif"> 

Когда вы щелкаете по нему правой кнопкой мыши и загружаете его, это оригинал, взятый здесь . Есть ли у них какой-либо способ сохранить его с помощью эффектов оттенка?

Комментарии:

1. используйте запись экрана

2. @TemaniAfif Привет, спасибо за комментарий. Я не хочу использовать запись экрана по нескольким причинам, одна из которых заключается в том, что она не сохраняет прозрачность фона. Я хотел бы сделать это программно. Спасибо