title: Load images from JSON object containing image references
body: <p>I'm in the process of building an API that will take the JSON object output from a Konva stage and convert that into images on the server-side. I'm making use of the <code>konva-node</code> npm package and it works really well until it comes to loading in remote images that may have been a part of the original "design". I can see <a href="https://stackoverflow.com/questions/44835695/konvajs-serialize-stage-containing-images">from this answer</a> as to how we would solve the problem in the browser, however this doesn't appear to work in the same way in the nodejs implementation of Konva.</p>
  
  <p>An example JSON input is the following:</p>
  
  <pre><code>let json = {
  "attrs": {
      "width": 600,
      "height": 600
  },
  "className": "Stage",
  "children": [{
      "attrs": {},
      "className": "Layer",
      "children": [{
          "attrs": {
              "src": "https://ichef.bbci.co.uk/onesport/cps/480/cpsprodpb/1859A/production/_101883799_gettyimages-844211624.jpg"
          },
          "className": "Image"
      }]
  }, {
      "attrs": {},
      "className": "Layer",
      "children": [{
          "attrs": {
              "text": "Hello world.",
              "x": 50,
              "y": 50,
              "fontSize": 20,
              "fill": "blue"
          },
          "className": "Text"
      }]
  }]
  </code></pre>
  
  <p>}</p>
  
  <p>As you can see, I've subbed in <code>src</code> attributes as a sort of placeholder for when we come to load up the data into a canvas again. </p>
  
  <p>The issue that I'm having is with actually getting those images to load in again once I process the JSON on the server-side. </p>
  
  <p>Here is my current code</p>
  
  <pre><code>var fs = require('fs')
  const Konva = require('konva-node')
  var Request = require('pixl-request')
  
  let json = {"attrs":{"width":600,"height":600},"className":"Stage","children":[{"attrs":{},"className":"Layer","children":[{"attrs":{"src":"https://ichef.bbci.co.uk/onesport/cps/480/cpsprodpb/1859A/production/_101883799_gettyimages-844211624.jpg"},"className":"Image"}]},{"attrs":{},"className":"Layer","children":[{"attrs":{"text":"Hello world.","x":50,"y":50,"fontSize":20,"fill":"blue"},"className":"Text"}]}] }
  
  var stage = new Konva.Stage()
  
  let loadedDesign = Konva.Node.create(json)
  
  
  loadedDesign.find('Image').forEach((imageNode) =&gt; {
    const imageURL = imageNode.getAttr('src')
    var request = new Request();
  
    request.get(imageURL, function(err, resp, data) {
      var img = new Konva.window.Image()
      img.onerror = err =&gt; { throw err }
      img.onload = () =&gt; {
        imageNode.image(img);
        imageNode.getLayer().batchDraw();
      }
  
      img.src = data;
    });
  });
  
  loadedDesign.toDataURL({
    callback: function(data) {
      var base64Data = data.replace(/^data:image\/png;base64,/, '');
      fs.writeFile('./images/out.png', base64Data, 'base64', function(err) {
        err &amp;&amp; console.log(err)
        console.log('See out.png')
      });
    }
  });
  </code></pre>
  
  <p>The current output results in an image with the text on the canvas but the image never makes it in. </p>