html - 为什么 Google Images 使用 Canvas 绘制图像？

Question

更新:Google 图片不使用 <canvas>没有了。

---

我注意到了 Google Images正在使用 Canvas 渲染图像。 <img>用作不支持 Canvas 的浏览器的后备。

<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

也许它可以让他们更多地控制图像的内容。

您可以分析图像的颜色范围、主要颜色，甚至它的内容(给定智能算法)。

您还可以执行逐像素修改 — 更改亮度、对比度、 Gamma 等(不确定他们为什么要这样做；也许是为了将来使用)。

您还可以旋转图像(在支持 Canvas 但不支持 CSS 转换的浏览器上；例如，参见 demo of my fabric.js)。