用Javascript连接两个base64图像

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:的内容data: URI是完整图像文件数据（包括标题）的base64编码表示。 这样将它们串联起来将不会有任何运气。

这可能是可能在客户端的唯一方法是使用Canvas 。 这是一个朝着这个方向发展的SO问题（它将图像提取到画布对象中）。

Answer 2

我在实际实现解决方案的另一端遇到了这篇文章。 实际上，您可以连接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

例子.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（），以根据标头中的索引和长度来检索该文件。 切片是我所知道的最快的方法之一。

唯一的麻烦是浏览器

Answer 3

我认为您的建议至少有2个问题：

1. 您尚未首先指定图像的格式（例如GIF，JPG，PNG等）。Base64只是将二进制数据编码为文本的一种方式。 是否可以通过简单的位流串联将两个图像拼接在一起，将取决于图像的基本二进制格式。

2. 我不知道任何现代图像格式首先会支持这种二进制连接。 您最初担心的是（图像在其二进制表示中的某处具有元数据，该元数据指定了图像大小，位深度等）。

我认为您可能要使用的方法是找到一个图像处理库，该库可让您获取二进制图像（一旦从Base64解码），将其拼接成合适的形状，然后重新编码较大的结果图像为Base64。

如果仅限于JavaScript，它看起来像http://www.pixastic.com/lib/是一个不错的图像处理库，但是我无法确定它是否支持所需的缝合类型。 不过，这是一个起点。