Concatenating two base64 images in Javascript

Question

Is it possible to do simple string concatenation to 'join' 2 base 64 encoded images together if the images have the same characteristics (width/height/color depth etc)?

eg

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

img1+img2 results in

img3 w=100, h=400

intuitively this feels like a stupid question since presumably the encoding includes headers containing meta data, but i don't know enough about base64 to know any better ;)

So far my preliminary tests have yielded broken results.

Thanks, Eli

Answer 1

since presumably the encoding includes headers containing meta data, but i don't know enough about base64 to know any better ;)

You're right: The content of a data: URI is the base64 encoded representation of the full image file data, including headers. You won't have any luck concatenating them that way.

The only way that could be possible on client side is using a Canvas. Here's a SO question that goes into that direction (it fetches an image into a canvas object).

Answer 2

I think what you're suggesting has (at least) 2 problems:

1. You haven't specified what format the images are in in the first place (e.g. GIF, JPG, PNG, etc.) Base64 is just a way of encoding binary data into text. Whether two images can be stitched together by simple bitstream concatenation would depend on the underlying binary format of the images.

2. I don't know of any modern image formats that would support this kind of binary concatenation in the first place. Your initial concern (that images have meta-data somewhere in their binary representation that specifies image size, bit depth, etc.) is well founded.

I think the way you might want to go with this is to find a image manipulation library that allows you to take your binary images (once decoded from Base64), stitch them together as you see fit, and then re-encode the resulting, larger image as Base64.

If you're limited to JavaScript only, it looks like http://www.pixastic.com/lib/ is a nice image manipulation library but I can't determine whether it supports the kind of stitching you want. It's a place to start though.