In browser using XHR ArrayBuffer, embedding multiple images will use only the first image

@mattblang already mentioned this in this comment on the now closed issue #371.

I’m using XHR with responseType of ‘arraybuffer’, and feeding the response to pdfkit’s image method:

var imageURLs = ['a.png', 'b.png', 'c.png'];
imageURLs.forEach(fetchImage);

var fetchedImages = {};
function fetchImage(url) {
  var request = new XMLHttpRequest();
  request.open("GET", url, true);
  request.responseType = "arraybuffer";

  request.onload = function() {
    fetchedImages[url] = request.response; // ArrayBuffer instance
    if(imageURLs.every(function(imageURL) {
      return fetchedImages[imageURL];
    }) {
      pdfDoc.image(fetchedImages['a.png'], 0, 0);
      pdfDoc.image(fetchedImages['b.png'], 0, 100);
      pdfDoc.image(fetchedImages['c.png'], 0, 200);
    }
  };
  request.send();
}

The first image works fine, but all other images will display the first image instead. The problem is Buffer.isBuffer returns false for ArrayBuffer objects, which causes this code to use an image from cache.

    unless Buffer.isBuffer(src)
      image = @_imageRegistry[src]

A ugly workaround for this is to make ArrayBuffer pretend to be Buffer (this works because Buffer.isBuffer(src) calls src.constructor.isBuffer(src)):

ArrayBuffer.isBuffer = function() {
  return true;
};

But the proper solution would probably be to check that src is either Buffer or ArrayBuffer.

[alafr]

I already have an open pull request (#554) for images so I added a fix to this issue

[alafr]

It was not yet fixed when 0.8.0 was released. This bug is fixed in 0.8.2