为什么 Google 图片使用画布绘制图像？
更新：Google 图片不再使用 。
我注意到 Google 图片 使用画布来渲染图像。
<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>
使用 而不是
Updated: Google Images does not use <canvas> any more.
I noticed Google Images is using canvas to render images. <img> is used as a fallback for browsers that does not support 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>
What's the point of using <canvas> rather than <img>?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（4）
也许这可以让他们更好地控制图像的内容。
您可以分析图像的颜色范围、流行颜色，甚至其内容（给定智能算法）。
您还可以执行每个像素的修改 - 更改亮度、对比度、伽玛值等（不确定他们为什么要这样做；也许是为了将来的某些用途）。
您还可以旋转图像（在支持画布但不支持 CSS 转换的浏览器上；例如，请参阅此 我的 Fabric.js 演示）。
Maybe it gives them more control over the contents of an image.
You can analyze color range of an image, prevailing color, even its content (given smart algorithm).
You can also perform per-pixel modifications — change brightness, contrast, gamma, etc. (not sure why they would want to do this; perhaps for some future use).
You can also rotate an image (on browsers that support canvas but not CSS transformations; see, for example, this demo of my fabric.js).
一些移动设备对一页上的图像资源数量有限制。例如，Mobile Safari 在 ± 6.5 MB 后停止加载图像图像已加载。
正如另一个答案中提到的，通过使用
而不是多个以外部文件作为src的![]()
Several mobile devices have a limit on the number of image resources on one page. For example, Mobile Safari stops loading images after ± 6.5 MB of images have been loaded.
As mentioned in another answer, by using
<canvas>instead of several<img>elements with external files as theirsrc, Google can load all the images in one request (which is obviously better for performance) — but it also works around this limitation.也许这是因为滚动速度太慢/包含大量图片的页面上出现一些渲染问题？
maybe this was done because of too slow scrolling / some rendering issues on a page with lots of pictures?