Javascript中将两个base64图片组合在一起

Question

如果两个具有相同特征（如宽度/高度/颜色深度等）的base64编码图像需要进行简单的字符串连接，是否有可能实现？

例如：

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

img1+img2 的结果是

img3 w=100, h=400

直觉上，这似乎是一个愚蠢的问题，因为编码应该包含包含元数据的头部，但我对base64知之甚少，所以无法确定是否正确；）

到目前为止，我的初步测试产生了错误的结果。

谢谢， Eli

- Eli_s

---

@GJ - 我在那个fiddle中没有看到任何图像串联发生...? - ashleedawg

同意@ashleedawg，已删除参考资料。Quora上有人提到过一种使用canvas的方法，您可以尝试一下https://www.quora.com/How-do-I-combine-two-images-and-save-using-javascript。 - G J

Answer 1

“since presumably the encoding includes headers containing meta data, but i don't know enough about base64 to know any better ;)” 的意思是“因为编码可能包含包含元数据的头文件，但我对base64不了解，所以不确定。”。“data:” URI的内容是完整图像文件数据的base64编码表示，包括标头。你不能通过这种方式连接它们而获得成功。唯一可能在客户端上实现的方法是使用Canvas。这里是一个涉及此方向的SO问题（它将图像提取到canvas对象中）。

- Pekka

---

这也不可能（或者至少不是一个好主意）完全连接base64编码的字符串，因为末尾可能存在填充。 - ksoderstrom

谢谢你的帮助，Pekka。我本来希望有捷径可走，但我认为使用画布会是正确的选择。 - Eli_s

Answer 2

我认为你提出的方案至少有两个问题：

1. 首先，你没有指定图像最初的格式（例如GIF、JPG、PNG等）。Base64只是一种将二进制数据编码成文本的方式。两个图像是否可以通过简单的比特流串联在一起取决于图像的底层二进制格式。

2. 我不知道任何现代图像格式会支持这种二进制串联。你最初的担忧（即图像在其二进制表示中具有元数据，指定图像大小、位深度等）是有根据的。

我认为你可能想要采用的方法是找到一个图像处理库，允许你将解码后的二进制图像拼接在一起，然后将结果更大的图像重新编码为Base64。

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

- Gene Goykhman

Answer 3

我在实际实现解决方案的另一侧发现了这篇文章。您实际上可以连接base64字符串。只需确保在编码时间（在您的情况下是连接时间）知道两个字符串的确切长度或使用分隔符即可。我编写了一个将文件组合成base64的文件格式，客户端随后解析该格式。由于它是针对名为zero的画布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() 函数获取数据部分中的文件。Slice 是我知道的最快的方法之一。

唯一的问题是浏览器...

- CharlesTWall3