конвертировать фоновое изображение в оттенки серого - на лету

Question

Кажется, я не могу найти именно то, что ищу, поэтому, возможно, один из вас может мне помочь

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

Эти изображения хранятся в Facebook в цвете, и я хотел бы взять их и изменить их на оттенки серого и отобразить их, или, возможно, наложить весь контейнер на оттенки серого или что-то в этом роде.

Есть идеи / решения?

Это можно сделать с помощью HTML5 canvas.

Answer 1

Давайте попробуем этот подход:

var divid = $('#DIVID');
var currentBG = divid.css('background-image');
divid.html('<img src="'+currentbg+'" class="grescaled" />');
divid.css('background-image', '');

Выполнив вышеизложенное, вы фактически извлекаете фоновое изображение этого конкретного DIV, сбрасываете фон в «ничто», затем вставляете динамический тег IMG внутри того же самогоDIV показывает то же изображение, но на этот раз с классом CSS greyscaled .

В вашем файле CSS добавьте следующие строки:

.greyscaled { filter: url(/filters.svg#grayscale); filter: gray; -webkit-filter: grayscale(1); }

Теперь создайтефайл в корневом каталоге вашего документа с именем filters.svg, с содержимым ниже, которое фактически будет влиять на содержимое IMG.

<svg xmlns="http://www.w3.org/2000/svg">
<filter id="grayscale">
<feColorMatrix type="matrix" values="0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0" />
</filter>
</svg>

На всякий случай, если вы захотите поместить все на место на выходе, вы можете отменитьдействия над тем, чтобы вернуть IMG на задний план DIV.

Answer 2

Я использовал информацию из этого источника с некоторым успехом в прошлом.Единственное ограничение заключается в том, что изображения в оттенках серого должны находиться на том же сервере, что и сценарий.Кажется, работает через браузеры без встроенной поддержки (которая не является IE):

http://james.padolsey.com/javascript/grayscaling-in-non-ie-browsers/