title: How to join base64 encoded images?
body: <p>I have this problem, of aggregate 4 base64 encoded images as one. I'm working with node js and received a JSON with the information I need, I work that information and then I display the images in the browser like this:</p>
  
  <pre><code>res.send(
   '&lt;div style="display: inline-flex;"&gt;' +
    '&lt;div&gt;' +
      '&lt;div&gt;&lt;img src="' + panes.content + '"&gt;&lt;/div&gt;' +
      '&lt;div&gt;' +
        '&lt;div&gt;&lt;img src="' + timeAxis.content + '"&gt;&lt;/div&gt;' +
      '&lt;/div&gt;' +
    '&lt;/div&gt;' +
    '&lt;div&gt;&lt;img src="' + rightAxis.content + '"&gt;&lt;img src="' + rhsStub.content + '"&gt;&lt;/div&gt;' +
  '&lt;/div&gt;');
  </code></pre>
  
  <p>The problem with this is that the result in the browser its displayed 4 images...
  I have been looking a way to joining the images, but I can't get it done, already tried with buffers and canvas, but I was not able to use canvas in the backend. 
  Anyone have a clue how to solve this issue?</p>
  
  <p>UPDATE:
  The problem is that I have to pass 4 img tag's, and that create 4 images in the browser, like the picture bellow, that actually are 4 images that I manage to put in the correct place.
  <a href="https://i.stack.imgur.com/WDzyb.jpg" rel="nofollow noreferrer">with the above code</a>,
  <a href="https://i.stack.imgur.com/asuGy.jpg" rel="nofollow noreferrer">with the code given by rsp</a>
  I what need is a way that can create one image only, with the base64 encoded images that I received from the server, because for example if the user want to download the image, it be only one image not four.</p>