用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/是一個不錯的圖像處理庫，但是我無法確定它是否支持所需的縫合類型。 不過，這是一個起點。