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

NVI*_*NVI 7 html canvas

更新: 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>
Run Code Online (Sandbox Code Playgroud)

什么是使用<canvas>而不是<img>

the*_*ejh 3

  • 您可以轻松地在一个请求中加载所有图像,甚至可以将其源代码嵌入到页面中,而无需使用 base64 来扩展源代码。
  • 您可以在 JS 中复制图像,而无需等待缓存。