data:image/gif;base64 图像没有动画

Posted 2023-02-24

【中文标题】data:image/gif;base64 图像没有动画

【英文标题】：data:image/gif;base64 Images Not Animated

【发布时间】：2016-04-27 03:06:24

【问题描述】：

似乎每当我尝试使用 data:image/gif 链接动画 GIF 时，它都不是动画的。这是我链接的内容：

<img src='data:image/gif;base64,R0lGODlhyADIAMIAAP/yAAoKCgAAAcRiAO0cJAAAAAAAAAAAACH5BAEAAAUALAAAAADIAMgAAAP+WLrc/jDKSau9OOvNu/9gKI5kaZ5oqq5s675wLM90bd94ru987//AoHBILBqPyKRyyWw6n9CodEqtWq/YrHbL7Xq/4LB4TC6bz+i0es1uu9/wuHxOr9vv+Lx+z+/7/4CBgoOEhYaHiImKi4yNjo+QkZKTlJWWl5iZmpucnZ6foKGio6SlpqeoqaqrrK2ur7CxsrO0tba3uLm6u7y9vr/AwcLDxMXGx8jJysvMzc7P0NHS09TV1tfY2drb3N3e3+Dh4uPk5eaTAukCzOrry+3s6sjtAfUB8MP09vjC+vX8wfzdk/dLoL2B6YAZ3EfQ18J/DXs9ROjOobqDBwGSmHj+ENJEjSM42vN4ESPEhCdE1iOZzuTJiiVUBmApwCVFEO3aAdjJs+fOjo8+RuSQU53PowCAOhKK0kPRdEh9Km3EFCbRp1F7TmWkEylIC12zZt26KKzPrxXMij1KVpFanmgpvF3Ls22iuQDiTsBL1y6Yp4AD28yI1evQvUbprvX7JbDjnIMZFo2q1wFfxT9HnnnMuWZkingrN7iMmbGXzo8/g058VDQD0opNZ5F5ELNtw00jwL4tGwtte7eDwz1smbVwpL2v/K53PLjo3baTW1keoPnt58at19VsRqZW4NrPEi8AXbj02SUjf2cevifa8sHP+04/eH319sNzv86OP/P+ys302WRffzu9x19/8m2BWkvg9WcgVMepBseCnrHn4Hjw2WfThAvWRuCDAjQn4RsUenihfgtkuF1kgJiIn2xmDSDjAPYx4mJ7MBo3I40rzrTIjeHlCOFOO9b4Y4MvcqebjjMaqYiLoR2YlJIQtLPjlTMmqAeUUuIlpABYYqllHlwOKZ6ZTi6ZTphXjolHmSHiFidbVD5gJZtZ1mnIQQT0ScBtfv7ZI4V3iqlnIXz6CaiigxK6Zphu3pFon4tS2qijbEZqx6SCYhaofY4+auh/jgCpXZE8oSqWpn2Yap2qAMAaFat8uNocrLIid6iNSLaHa5OL7fqIarf9KmNfwpaK+lmxwBLZ7FjJNkKsbcbyuGq0vKpH7bO50klqJ7YSmCYn4Yrrn4+elGsurYeoKy67e/ZqrrfogivvvONu4i6B8CJ6L77nguKigD0O7FK+mhhskoZIEhzwJwpjxLCFUy7co8ANH1xwxhY/LIpdIB/qmr6Hhvztfih+XPLKJ6c4HsYtK2ByvShb9UQCADs=' />

这只是为我显示图像的第一帧，它没有动画。知道为什么吗？这就是data:image/gif 的工作原理吗？如果是这样，有没有办法让它动画？

我已经在 Chrome 和 Microsoft Edge 上尝试过，两者都给了我相同的结果。

这是原图：

【问题讨论】：

看到数据 uri 比动画 gif(2377b) 更小（1306b），我会说它只有一帧。

知道为什么它只有 1306 个字节吗？这是我在 php 中转换图像的方法。 i.bugg.co/56a03e367983e.png

php.net/manual/en/…

【参考方案1】：

您的 base64 编码数据不是动画 gif。我对您链接的原始图像进行了编码，它工作正常。

<img src='data:image/gif;base64,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' />

Fiddle

【参考方案2】：

您的数据不包含整个原始文件。使用data: URI Kitchen 对原始图像进行编码，我们看到 URI 应该是：

<img src='data:image/gif;base64,R0lGODlhyADIAPIFAP%2FyAAoKCgAAAcRiAO0cJAAAAAAAAAAAACH%2FC05FVFNDQVBFMi4wAwEAAAAh%2BQQJCgAFACwAAAAAyADIAAAD%2F1i63P4wykmrvTjrzbv%2FYCiOZGmeaKqubOu%2BcCzPdG3feK7vfO%2F%2FwKBwSCwaj8ikcslsOp%2FQqHRKrVqv2Kx2y%2B16v%2BCweEwum8%2FotHrNbrvf8Lh8Tq%2Fb7%2Fi8fs%2Fv%2B%2F%2BAgYKDhIWGh4iJiouMjY6PkJGSk5SVlpeYmZqbnJ2en6ChoqOkpaanqKmqq6ytrq%2BwsbKztLW2t7i5uru8vb6%2FwMHCw8TFxsfIycrLzM3Oz9DR0tPU1dbX2Nna29zd3t%2Fg4eLj5OXmkwLpAszq68vt7OrI7QH1AfDD9Pb4wvr1%2FMH83ZP3S6C9gemAGdxH0NfCfw17PUTozqG6gwcBkph4EP%2FSRI0jONrzeBEjxIQnRNYjmc7kyYolVAZgKcAlRRDt2gHYybPnzo6PPkbkkFOdz6MAgDoSitJD0XRIfSptxBQm0adRe05lpBMpSAtds2bduiisz68VzIo9SlaRWp5oKbxdy7NtorkA4k7AS9cumKeAA9vMiNXr0L1G6a71%2ByWw45yDGRaNqtcBX8U%2FR555zLlmZIp4Kze4jJmxl86PP4NOfFQ0A9KKTWeReRCzbcNNI8C%2BLRsLbXu3g8M9bJm1cKS9r%2Fyudzy46N22k1tZHqD57efGrdfVbEamVuDazxIvAF249NklI39nHr4n2vLBz%2FtOP3h99fbDc7%2FOjj%2Fzys3%2F9NlkX387vcdff%2FJtgVpL4PVnIFTHqQbHgp6x5%2BB48Nln04QL1kbggwI0J%2BEbFHp4oX4LZLhdZICYiJ9sZg0g4wD2MeJiezAaNyONK860yI3h5QjhTjvW%2BGODL3Knm44zGqmIi6EdmJSSELSz45UzJqgHlFLiJaQAWGKpZR5cDimemU4umU6YV46JR5kh4hYnW1Q%2BYCWbWdZpyEEE9EnAbX7%2B2SOFd4qpZyF8%2BgmoooMSumaYbt6RaJ%2BLUtqoo2xGasekgmIWqH2OPmrof44AqV2RPKEqlqZ9mGqdqgDAGhWrfLjaHKyyIneojUi2h2uTi%2B36iGq3%2FSpjX8KW%2Blmxh8AS2exYyTZCrG3G8rhqtLyqR%2B2zudJJaie2EpgmJ%2BGK65%2BPnpRrLq2HqCsuu3v2aq636IIr77zjbuIugfAiei%2B%2B54LiooA9DuxSvpoYbJKGSBIc8CcKY8SwhVMu3KPADR9ccMYWPyyKXSAf6pq%2Bh4b87X4oflzyyienOB7GLStgcr0oW%2FVEAgAh%2BQQJCgAFACwsAHwAbABMAAAD%2F1i63P4wPkGFvDjrzXO1XSiOJPSVaKpK5%2Bq%2B4RfMQQvfOCPTdu6%2Fu1nvR0QFa5WiUnSkISnL6KbJS0qvrIrTOcR6FVSh9UsuhJ%2Bg29n5PXdXa1pbuxVDcfHZnFK3p2F5AXsCfWgpHx8AiouMimxebmMkiBWNlgCPWJF3JZQUl42ZV5t%2FI54CoIyiUomXbx6VqbKrUa2Wrxi2spe0S7qMuBe%2Fu6pykLG3khzDxI7GYKfRlIVcnqDBDszNxXoL0t901Gja2A3a287d0ODS4n7kysLI6Jai7N%2Fu4%2FPA8Vmf9Lyq8MlHA6BBAOXOHaw2kGCAgwAT7oO4iCEhhw8pbpP4T%2F8jNzQYM3rcxRHVyIrPzISj9vHkolcKNdpbWailS4T9VHa8mU6QN5p9bLqEOdHlzIYsUc7gSXQnz1462TlhmjNmqny57l1cerOpSYNY5d2b2rVq0WZh%2FUktWJaTubPE0qogazSliXkD8g74KIXuSag68OrlG8XvSMA%2Fd%2Brdq9TnEsMeEa%2F7CmAx4cdsFcFz2jgrhcWg9UqG4Xcz5csRPoQOPfpF6bPaRqtevbi1i9ecNZ%2BVXYF2bbtEnBAYToAe8eKNtSKibXuFcOLGoSdX3nt187k0jkcf%2FpF6ddbAfzznjk77dO%2FMwyuBrNHyIvez1PfNfBJ%2B5cG7rudgT9G%2BfVCl%2BuHAH0T%2B4RefOmUskA89BeYVl3xeLIhOg4wd6FiCCki4DYUPIoihhs1wmB%2BEGGZIH08AkljigCj2VOIFLLYYIBYxojjjFTU%2BpeKHJ7YYyo4J5njTjfNx5WNAHr7YgF81NcZkUJ0pCcGTdXxE5RaoScnAlVzS16SLWjrQpZGYQNnTlWFKANWa6pWTZgFsJmminFG9iUGcF27ZZk52Kqgenne5NUICACH5BAUKAAUALDAAfABsAEwAAAP%2FWLrc%2FjA%2BQYW8OOvNc7VdKI4k9JVoqkrn6r7hF8xBC984I9N27r%2B7We9HRAVrlaJSdKQhKcvopslLSq%2BsitM5xHoVVKH1Sy6En6Db2fk9d1drWlu7FUNx8dmcUrenYXkBewJ9aCkfHwCKi4yKbF5uYySIFY2WAI9YkXcllBSXjZlXm38jngKgjKJSiZdvHpWpsqtRrZavGLayl7RLuoy4F7%2B7qnKQsbeSHMPEjsZgp9GUhVyeoMEOzM3FegvS33TUaNrYDdrbzt3Q4NLifuTKwsjolqLs3%2B7j88DxWZ%2F0vKrwyUcDoEEA5c4drDaQYICDABPug7iIISGHDyluk%2FhP%2FyM3NBgzetzFEdXIis%2FMhKP28eSiVwo12ltZqKVLhP1UdryZTpA3mn1suoQ50eXMhixRzuBJdCfPXjrZOWGaM2aqfLnuXVx6s6lJg1jl3ZvatWrRZmH9SS1YlpO5s8TSqiBrNKWJeQPyDvgohe5JqDrw6uUbxe9IwD936t2r1OcSwx4Rr%2FsKYDHhx2wVwXPaOCuFxaD1SobhdzPlyxE%2BhA49%2BkXps9pGq169uLWL15w1n5VdgXZtu0ScEBhOgB7x4o21IqJte4Vw4sahJ1fee3XzuTSORx%2F%2BkXp11sB%2FPOeOTvt078zDK4Gs0fIi97PU9818En7lwbuu52BP0b59UKX64cAfRP7hF586ZSyQDz0F5hWXfF4siE6DjB3oWIIKSLgNhQ8iiKGGzXCYH4QYZkgfTwCSWOKAKPZU4gUsthggFjGiOOMVNT6l4ocnthjKjgnmeNON83HlY0AevtiAXzU1xmRQnSkJwZN1fETlFqhJycCVXNLXpItaOtClkZhA2dOVYUoA1ZrqlZNmAWwmaaKcUb2JQZwXbtlmTnYqqB6ed7k1QgIAOw%3D%3D' />

哪个does indeed animate。

【讨论】：

谢谢。这让我转向另一个问题，然后......知道为什么吗？这是我在 PHP 中转换图像的方法。 i.bugg.co/56a03e367983e.png

imagecreatefromgif 仅将第一帧加载到内存中。见the manual