Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Concatenates two ArrayBuffers
/**
* Creates a new Uint8Array based on two different ArrayBuffers
*
* @private
* @param {ArrayBuffers} buffer1 The first buffer.
* @param {ArrayBuffers} buffer2 The second buffer.
* @return {ArrayBuffers} The new ArrayBuffer created out of the two.
*/
var _appendBuffer = function(buffer1, buffer2) {
var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
tmp.set(new Uint8Array(buffer1), 0);
tmp.set(new Uint8Array(buffer2), buffer1.byteLength);
return tmp.buffer;
};
@vhmth
Copy link

vhmth commented Jun 23, 2015

Good πŸ‘

@khalilovcmd
Copy link

khalilovcmd commented Jul 27, 2016

πŸ‘

@mapaiva
Copy link

mapaiva commented Aug 19, 2016

πŸ‘

@rico345100
Copy link

rico345100 commented Jan 31, 2017

Awesome.

@amolpshinde07
Copy link

amolpshinde07 commented Apr 5, 2017

πŸ‘

@Ladvien
Copy link

Ladvien commented Jun 12, 2017

πŸ‘

@deanslamajr
Copy link

deanslamajr commented Jul 7, 2017

πŸ‘

@samccone
Copy link

samccone commented Dec 17, 2017

πŸ‘

@apowers313
Copy link

apowers313 commented Mar 29, 2018

In ES6+ there's an easier way using the "iterator" property of TypedArrays and the spread operator:

// create three example TypedArrays
// if you just have an ArrayBuffer called `ab` you can do `new Uint8Array(ab)`
var b1 = new Uint8Array([0x01, 0x02, 0x03]);
var b2 = new Uint8Array([0x04, 0x05, 0x06]);
var b3 = new Uint8Array([0x07, 0x08, 0x09]);

// combine all three arrays into a new array buffer
// if you need the ArrayBuffer instead of a TypedArray, it's at `combined.buffer
// NOTE: square brackets in the Uint8Array constructor -- Uint8Array([...])
var combined = new Uint8Array([
    ...b1,
    ...b2,
    ...b3
]);

// combined now contains:
// 0x01, 0x02, 0x03, 0x04, 0x05, 0x06, 0x07, 0x08, 0x09

@tchakabam
Copy link

tchakabam commented Jul 24, 2018

Nullable version with correct jsdoc annotation. Allows to start-off from a null value accumulator and add up from there. Or to be able to concat with null which results in returning the same ArrayBuffer as input. Another option would be to create a plain copy here if you want to be "safe".

Also, I don't see any state here, no point this being "private" or any member of a class.

/**
 * Creates a new ArrayBuffer from concatenating two existing ones
 *
 * @param {ArrayBuffer | null} buffer1 The first buffer.
 * @param {ArrayBuffer | null} buffer2 The second buffer.
 * @return {ArrayBuffer | null} The new ArrayBuffer created out of the two.
 */
var concatArrayBuffers = function(buffer1, buffer2) {

  if (!buffer1) {
    return buffer2;
  } else if (!buffer2) {
    return buffer1;
  }

  var tmp = new Uint8Array(buffer1.byteLength + buffer2.byteLength);
  tmp.set(new Uint8Array(buffer1), 0);
  tmp.set(new Uint8Array(buffer2), buffer1.byteLength);
  return tmp.buffer;
};

@danakt
Copy link

danakt commented Nov 9, 2018

@apowers313 Unfortunately, your option will work slowly when high performance is needed. And typed arrays are used in such cases.

@javiercbgr
Copy link

javiercbgr commented Mar 29, 2019

πŸ‘

@saikishored
Copy link

saikishored commented Jan 10, 2020

Thank you. You saved my day :)

@jonathan-annett
Copy link

jonathan-annett commented Feb 24, 2020

 function concatArrayBuffers (bufs) {
                        var offset = 0;
                        var bytes = 0;
                        var bufs2=bufs.map(function(buf,total){
                            bytes += buf.byteLength;
                            return buf;
                        });
                        var buffer = new ArrayBuffer(bytes);
                        var store = new Uint8Array(buffer);
                        bufs2.forEach(function(buf){
                            store.set(new Uint8Array(buf.buffer||buf,buf.byteOffset),offset);
                            offset += buf.byteLength;
                        });
                        return buffer
                         
                    }
 var all_buffers = concatArrayBuffers([buffer1,buffer2,buffer3]);

@11zouzouzou
Copy link

11zouzouzou commented Mar 24, 2020

good

@dtruffaut
Copy link

dtruffaut commented Jan 13, 2021

Great ! πŸ‘πŸ‘πŸ‘

@zholmes1
Copy link

zholmes1 commented Jan 26, 2021

πŸ‘

@Krashdrive
Copy link

Krashdrive commented May 3, 2021

function concatArrayBuffers(...bufs){
	const result = new Uint8Array(bufs.reduce((totalSize, buf)=>totalSize+buf.byteLength,0));
	bufs.reduce((offset, buf)=>{
		result.set(buf,offset)
		return offset+buf.byteLength
	},0)
	return result.buffer
}

@martonlederer
Copy link

martonlederer commented Nov 3, 2021

Literally saved my day. Best solution for performance

Copy link

ghost commented Jan 11, 2022

const concatenated = await new Blob([ buffer, buffer2 ]).arrayBuffer()

@Krashdrive
Copy link

Krashdrive commented Jun 18, 2022

I like Krashdrive's solution, simple and works flawlessly!

Thanks :)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment