Question

已更新： Google图片不再使用<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

也许它给了他们更多控制对图像的内容。

您可以分析图像的颜色范围，流行的颜色，甚至是内容（给定智能算法）。

您还可以执行逐像素修改 - 更改亮度，对比度，伽马等等（不确定他们为什么要这样做;也许将来某些用途）。

您还可以旋转图像（在支持画布但不支持CSS转换的浏览器上;例如，请参阅此demo of my fabric.js）。

Answer 2

一些移动设备对一页上的图像资源数量有限制。例如，Mobile Safari stops loading images after ± 6.5 MB of images have been loaded。

正如另一个答案所述，通过使用<canvas>代替多个<img>元素并将外部文件作为src，Google可以在一个请求中加载所有图片（这显然更好）性能） - 但它也可以解决这个限制。

Answer 3

您可以轻松地在一个请求中加载所有图像，甚至可以将其源代码嵌入到页面中，而不会使用base64对源进行充气。
您无需等待缓存即可在JS中制作图像副本。

Answer 4

也许这是因为在包含大量图片的页面上滚动太慢/某些渲染问题？

为什么Google Image会使用画布绘制图像？

4 个答案: