Question

如果图像具有相同的特征（宽度/高度/颜色深度等），是否可以将简单的字符串连接“连接”2个基本64位编码图像？

例如

img1 w=100, h=200
img2 w=100, h=200

img1+img2会产生

img3 w=100, h=400

直觉上这感觉就像一个愚蠢的问题，因为大概编码包含包含元数据的标题，但我对base64知之甚少知之甚少;）

到目前为止，我的初步测试已经取得了破碎的成果。

谢谢，利

Answer 1

因为大概编码包含包含元数据的标题，但我对base64知之甚少知之甚少;）

你是对的：data: URI的内容是完整图像文件数据的base64编码表示，包括标题。你不会以任何方式将它们联系起来。

在客户端可以的唯一方法是使用Canvas。 Here's进入该方向的SO问题（它将图像提取到画布对象中）。

Answer 2

我认为你所建议的（至少）有2个问题：

您尚未指定图像所处的格式（例如GIF，JPG，PNG等）.Base64只是将二进制数据编码为文本的一种方式。是否可以通过简单的比特流连接将两个图像拼接在一起取决于图像的基础二进制格式。
我不知道任何支持这种二进制连接的现代图像格式。您最初关心的问题（图像在二进制表示中的某处有元数据，指定图像大小，位深度等）是有根据的。

我认为您可能想要的方法是找到一个图像处理库，它允许您拍摄二进制图像（一旦从Base64解码），根据您的需要将它们拼接在一起，然后重新编码结果，更大的图像为Base64。

如果你只限于JavaScript，看起来http://www.pixastic.com/lib/是一个不错的图像处理库，但我无法确定它是否支持你想要的那种拼接。这是一个开始的地方。

Answer 3

我在实际实施解决方案方面遇到过这篇文章。实际上，您可以连接base64字符串。您只需确保在编码时（在您的情况下连接时间）您知道两个字符串的确切长度或使用分隔符。我写了一个文件格式，用于组合base64中的文件，然后客户端解析。因为它是一个名为零的画布flash播放器，所以文件格式称为'.zwf'。这是格式。顺便说一句，您可以使用此格式递归编码整个目录。

模板

'<path>' <index> <length in characters> <encoding type (b64, b256, UTF8, etc.)> //HEADER these are entries in the zwf 
'<path>' <index> <length> <encoding>
'<path>' <index> <length> <encoding>
||||||||||                           //BREAK Indexes are relative to this
<file1><file2><file3>                //DATA All contents are here nose to tail

example.zwf

'hi.txt' 0 11 UTF8
'images/face.png' 11 1459 b64
||||||||||
Hello Worlddata:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/4QBgRXhpZgAASUkqAAgAAAACADEBAgAHAAAAJgAAAGmHBAABAAAALgAAAAAAAABQaWNhc2EAAAMAAJAHAAQAAAAwMjIwAqAEAAEAAAAbAAAAA6AEAAEAAAAbAAAAAAAAAP/bAIQAAwICAwICAwMDAwQDAwQFCAUFBAQFCgcHBggMCgwMCwoLCw0OEhANDhEOCwsQFhARExQVFRUMDxcYFhQYEhQVFAEDBAQFBAUJBQUJFA0LDRQUFBQRFBQUFREUFBQVFBQUFBUPFREPExIQFBIQDxUVFBASERQUFRESFBUUEBIPFRIN/8AAEQgAGwAbAwERAAIRAQMRAf/EABgAAAMBAQAAAAAAAAAAAAAAAAYHCAUC/8QAMhAAAQMDAwEEBwkAAAAAAAAAAQIDBAURIQAGEjEIEyJBBwkVMlGhsRQWJTRhYoGCkf/EABoBAAIDAQEAAAAAAAAAAAAAAAYHAgMEAAX/xAAtEQABAwICCAYDAQAAAAAAAAABAAIDBBEhoQUTMUFRgbHwBhIUcZHhYcHRMv/aAAwDAQACEQMRAD8AX27Kq7SdqVqfDsZcaG881cXAUlBINvO1r21skPkYXDcs1OxsszI3YAkDNHPZt2VtuP6P5dRq/dKmlj7W87Kw86gkDmpSxdeTYm5z56UkomnnJldt2Y/y6d8Pp6eANhZs24c/wuN2bIRtipSPZ7TnsdwocaX7zTal8j3aFDFvCSB5XNsW0aaDqXSROglN3MPO30UuvENI2GZtTC2zHjlfHqOiGlRLqONEtkKeZB7zwrlMlwHFcUyWlNciLgXHXXTxa6J0YNrhSpZ/TzMltexTw7MVTplYrTEZqNAhpj0cxH2nXgEqfS6e9CED3lXQm4tfIuMjSt1DxK6OU/5J2nonayojfTtlhBxAOA7tzRX6bNxmS4xSkRkRwsNPPovdTbiErSEmxIvZebE9BnOiXQEIc+WbhYd5II8T1BayKn3G7r/rMpUlvPTRlZAHmUySfTDApiSmJ+JS7lKWWVjiD+5fQfM/pqD5mtVjIXPx3JydkTb1c3My3vKBW3KLUZUt1M5DDaFNOgLNykKBAUkfEXt1vg6XGlZJG1hFrg4g99+ybGhdW+haQSLYEeyLO1zvp70a7o2W1Snkz48mPNE1ySORfcStg8uQtZQ73qMeK1sY9nQmshjfJbBxGV79ckOeIiyeaOPe0HO1uh+UnWu0m3wHe0cpc8wmVj5o0Tip4tz+kIel4OUuxFmGywWfB4gMD4mx+usi2K5PV5KU7tSotrUot/ei3DkbWVFTyx/VP+asEEU7AJWg24rm1EtOSYnEX4LQ9ZRHahbx2azHabYZYocnu2m0BKUcn0FVgMZIB10wDPKxosLHD4UGvdIS95uTvUTTPzK/4+mqVYv/2Q%3D%3D

使用.zwf，您可以连接任意文件类型并减少HTTP请求。您可以在zwf中打包整个网站。

几乎任何浏览器中的JavaScript都可以处理非常大的base64字符串。我在所有现代浏览器中都达到了2Mb。我的申请不需要任何更大的，所以一定要找到限制。

在客户端，当用户请求文件时，零调用数据部分上的.slice（）以根据标头中的索引和长度检索它。切片是我所知道的最快的方法之一。

唯一的麻烦就是浏览器

在Javascript中连接两个base64图像

3 个答案: