Почему Google Images рисует изображения, используя холст?

Question

Обновлено: Google Images больше не использует <canvas>.

---

Я заметил Google Images использует холст для рендеринга изображений.<img> используется в качестве запасного варианта для браузеров, которые не поддерживают холст.

<a class="rg_l" style="..." href="...">
  <canvas
    id="cvs_NcG8skPEDu7FWM:b"
    style="display:block"
    width="83"
    height="113">
  </canvas>
  <img 
    class="rg_i"
    id="NcG8skPEDu7FWM:b"
    data-src="http://t0.gstatic.com/images?q=tbn:ANd9GcQCB5NEbEUQhtmFI098HLSkfmoHTBtUfERUNkNKrhgFbtFBxZXY9ejXn_pUGg"
    height="113"
    width="83"
    style="width:83px;height:113px"
    onload="google.isr.fillCanvas(this);google.stb.csi.onTbn(0, this)"
    src="http://t0.gstatic.com/images?q=tbn:ANd9GcQCB5NEbEUQhtmFI098HLSkfmoHTBtUfERUNkNKrhgFbtFBxZXY9ejXn_pUGg">
</a>

Какой смысл использовать <canvas> вместо <img>?

Answer 1

Несколько мобильных устройств имеют ограничение на количество ресурсов изображения на одной странице.Например, Mobile Safari прекращает загрузку изображений после загрузки ± 6,5 МБ изображений .

Как уже упоминалось в другом ответе, с использованием <canvas> вместо нескольких элементов <img> с внешнимифайлы, как их src, Google может загружать все изображения в одном запросе (что, очевидно, лучше для производительности) - но это также работает вокруг этого ограничения.

Answer 2

Возможно, это дает им больший контроль над содержимым изображения.

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

Вы также можете выполнять модификации для каждого пикселя - изменять яркость, контрастность, гамму и т. Д. (Не знаю, почему они захотят это сделать; возможно, для использования в будущем).

Вы также можете вращать изображение (в браузерах, которые поддерживают холст, но не CSS-преобразования; см., Например, эту демонстрацию моего fabric.js ).

Answer 3

• Вы можете легко загрузить все изображения в одном запросе или даже встроить их источник в страницу, не надувая источник с помощью base64.
• Вы можете делать копии изображений в JS, не дожидаясь кэша.

Answer 4

может быть, это было сделано из-за слишком медленной прокрутки / некоторых проблем с рендерингом на странице с большим количеством изображений?