title: Images & PDFMake
body: <p>I'm currently using pdfmake to generate project report pdf's given information, and I'm having some trouble getting images to display.</p>
  
  <p>I have a function that generates a pdfmake "object" that goes like this:</p>
  
  <pre><code>function singleProject(data) {
      return {
          text: "Project: \n" + data.title + \n\nImage: \n",
          pageBreak: 'before'
      }
  }
  </code></pre>
  
  <p>I want to add an image to that report given an image URL (something like "images/sample_image.jpg"), and from what I've read on other answers I have to convert it to a base 64 format.</p>
  
  <p>One of these functions was provided in another answer but I can't quite figure out how I'm supposed to be utilizing it:</p>
  
  <pre><code>function convertImgToBase64URL(url, callback, outputFormat){
      var canvas = document.createElement('CANVAS'),
          ctx = canvas.getContext('2d'),
          img = new Image;
      img.crossOrigin = 'Anonymous';
      img.onload = function(){
          var dataURL;
          canvas.height = img.height;
          canvas.width = img.width;
          ctx.drawImage(img, 0, 0);
          dataURL = canvas.toDataURL(outputFormat);
          callback(dataURL);
          canvas = null;
      };
      img.src = url;
  }
  </code></pre>
  
  <p>However, I'm not exactly too sure how I should go about using this function to add the image to the first function provided, as it doesn't return the dataURL; if I try something like:</p>
  
  <pre><code>function singleProject(data) {
      return {
          text: "Project: \n" + data.title + \n\nImage: \n",
          image: convertImgToBase64URL(data.image), //data.image is the URL so something like "images/sample_image.jpg"
          width: 300,
          pageBreak: 'before'
      }
  }
  </code></pre>
  
  <p>The image doesn't show up.</p>