неизвестные фоновые манипуляции в реальном времени в интернет-магазине

Question

Я наткнулся на немецкий сайт электронной коммерции, который, кажется, манипулирует через фильтр фоном всех изображений продуктов на лету, и мне нужно знать, как это работает.

Оригинальный URL с предварительным изображением продукта: https://toom.de/p/kapp-gehrungssaege-hm80l/1500896

Если я проверю его, этот URL с некоторыми переменными будет задан, и, очевидно, «более или менее» белый фон изображения продукта изменится на последовательный серый цвет # f5f5f5.

https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png?quality=85&bg-color=f5f5f5&width=960&grey=1&format=jpg

Мне нужно знать, как это работает.

У меня всегда есть проблемы, чтобы сделать хорошую фотографию продукта с постоянным белым фоном (255 255 255 / #fff). Итак, я думаю, что этот способ манипулирования фоном с помощью фильтра может быть очень удобным. Я спросил об этом хороших программистов, которых я знаю, и показал им сайт toom.de, но никто не мог сказать мне, как они это сделали ...

Answer 1

Вы можете использовать свойство css filter, если вы не собираетесь обслуживать то, что они используют, но вам нужно вручную установить процент, чтобы соответствовать вашему фону.

img{
  filter: invert(4%);
}

, если вы хотите знать, просто проверьте их содержимое, где они используют изображение и используйте следующий код.

HTML

<img class="a-picture__image" data-js-picture-image="" src="https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png" srcset="https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png" alt="hauptbild">

Css

.a-picture__image {
    width: 100%;
    height: auto;
    filter: invert(4%);
}

Answer 2

Они написали сервис для изменения изображения на основе строки запроса, которую вы предоставляете с источником изображения, на основании того, что они возвращают изображение в ответ.

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

Оригинал, который вы дали: https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png?quality=85&bg-color=f5f5f5&width=960&grey=1&format=jpg

и я изменил строку запроса width:160: https://static.toom.de/produkte/bilder/aktionsartikel/1500896.png?quality=85&bg-color=f5f5f5&width=160&grey=1&format=jpg

проверить различия