Concatenating two base64 URL String (image)

Question

so I'm trying to concatenate the two or more base64 URL string generated from my camera (using the cordova-plugin-camera ). And I'm trying to generate it into one base64 URL string to convert it into a one image only.

I tried to concatenate it manually by doing this.

var compilation = ["data:image/jpeg;base64,"];
for(var x = 0; x < $scope.imageList.length; x++)
    compilation[0] = compilation[0] + $scope.imageList[x];

but that thing doesn't work. Any ideas how can I make this possible?

References:

iOS Concatenation

Join two Base64 strings and then decode them

Thank you!

Answer 1

Base64 encoding simply takes the bits that make up whatever it is you are encoding, in this case your images, and translates them into a string composed of a 64 character alphabet.

What you are trying to do is really no different than concatenating the original bits of the images into a single bit stream and saving it to a file. The result will be an invalid image due to image file formats having header data and stuff like that.

To top it off, base64 will add additional characters to the end of a string if the source data isn't in complete chunks of 24 bits.

Here is a good break down of base64 encoding and how it works

To accomplish what you are trying to do, you can just use an image editor to combine the images and then base64 encode that.

If you want to do this programatically, you can write a simple web service that takes your 2 separate base64 encoded images and then concatenate them together in the service and then return a base64 encoded string of the new image.