4

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!

Rich
  • 3,928
  • 4
  • 37
  • 66
  • 1
    Wait, what are you trying to achieve? You want to merge multiple **images** by appending their base64 representations one after the other? That won't work, and I don't even see how you did hope it to make anything. What kind of merging would have this produced in your mind? A larger image? Both images drawn one over the other? Anyway, none of this will happen, you will just have a long string with no meaning anymore, Just like `"red"+"blue"` doesn't return `"purple"` – Kaiido Jan 17 '19 at 03:08
  • @Kaiido okay I get your point. I think you get what I'm trying to achieve. I believe that adding a two or more base64 URL into one will produce a one large image. But I think you're correct that I won't happen. I think one of them drawn over the other. So what would be a great way to achieve this? – Rich Jan 17 '19 at 03:13
  • I do not think you can mix two base64 image but you can achieve that using canvas check this one https://stackoverflow.com/questions/32096540/merge-two-datauris-to-create-a-single-image – Whatatimetobealive Jan 17 '19 at 03:25

1 Answers1

0

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.

Jonathan S.
  • 541
  • 1
  • 3
  • 13
  • Well I'm not sure about the OP, But I am here to exactly "do this programatically". And telling that it is possible does not help me very lot. How should I do it? – Pouria Moosavi Sep 05 '21 at 06:16