title: jsPDF not printing img when I modify img src
body: <p>I am using some template code in order to generate PDFs which display my logo at the top. I thought it would be simple to replace the template's img src with my logo's src. However, while the code prints the original image to PDF just fine, it does not print the logo to PDF when I change the src to my logo's path.</p>
  
  <p><strong>This is the original image code:</strong></p>
  
  <pre><code>&lt;img src="https://miro.medium.com/max/1198/1*n-Q2XBz6CFC1MgMpdab4xQ.jpeg" style="height: 100px;" /&gt;
  </code></pre>
  
  <p><strong>This is what I changed the image code to:</strong></p>
  
  <pre><code>&lt;img src="logo.jpeg" style="height: 100px;" /&gt;
  </code></pre>
  
  <p>The logo image DOES display in the browser.</p>
  
  <p>The logo image does NOT display after printing to pdf.</p>
  
  <p>The original image displays in BOTH scenarios: both in the browser AND after printing to pdf.</p>
  
  <p>WHY would changing ONLY the image source break the PDF printing? Especially because we know the logo src is valid, since the logo image displays in the browser...?</p>
  
  <ol>
  <li>I TRIED: various image formats: .jpeg, .jpg, .png, .svg. None work.</li>
  <li>I TRIED: including the full path to the logo in the src.</li>
  <li>I TRIED: including the full path using % in the spaces.</li>
  <li>All of these attempts render the logo in the browser, but not in the PDF.</li>
  </ol>
  
  <p>Nothing has worked, even though it seems like it should be simple.</p>
  
  <p><strong>Here is the full code:</strong></p>
  
  <pre><code>&lt;html&gt;
  &lt;!--https://www.c-sharpcorner.com/article/how-to-convert-html-to-pdf-with-css-and-svgchart-using-jquery/--&gt;
  &lt;head&gt;
  &lt;style&gt;
  #customers {
    font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
    border-collapse: collapse;
    width: 100%;
  }
  
  #customers td, #customers th {
    border: 1px solid #ddd;
    padding: 8px;
  }
  
  #customers tr:nth-child(even){background-color: #f2f2f2;}
  
  #customers tr:hover {background-color: #ddd;}
  
  #customers th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: #4CAF50;
    color: white;
  }
  &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;input type="button" id="btnDownload" value="download" /&gt; Please click on this button to get chart with html content on pdf
    &lt;div class="white-back row" style="padding: 1.5rem;" id="tvgMainCnt"&gt;
      &lt;div id="top-content"&gt;
        &lt;div&gt;
          &lt;div&gt;
            &lt;img src="https://miro.medium.com/max/1198/1*n-Q2XBz6CFC1MgMpdab4xQ.jpeg" style="height: 100px;" /&gt;
          &lt;/div&gt;
          &lt;/div&gt;
        &lt;div style="margin-top: 1rem;"&gt;
          &lt;p style="color:green"&gt;
            Dear members,
          &lt;/p&gt;
        &lt;/div&gt;
        &lt;div&gt;
          Added some fake text: Please ignore this is test text, Please ignore this is test text, Please ignore this is test text.
        &lt;/div&gt;
        &lt;br /&gt;
         &lt;table id="customers" class="table table-striped" width="100%"&gt;
  
          &lt;thead width="100%" width="100%"&gt;
              &lt;tr class='warning' &gt;
                   &lt;th&gt;No.&lt;/th&gt;
                  &lt;th&gt;Country&lt;/th&gt;
                  &lt;th&gt;Population&lt;/th&gt;
                  &lt;th&gt;Date&lt;/th&gt;
                  &lt;th&gt;Age&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
          &lt;tbody width="100%"&gt;
              &lt;tr&gt;
                  &lt;td&gt;1&lt;/td&gt;
                  &lt;td&gt;Chinna&lt;/td&gt;
                  &lt;td&gt;1,363,480,000 000 000&lt;/td&gt;
                  &lt;td&gt;March 24, 2014&lt;/td&gt;
                  &lt;td&gt;19.1&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;2&lt;/td&gt;
                  &lt;td&gt;India&lt;/td&gt;
                  &lt;td&gt;1,241,900,000&lt;/td&gt;
                  &lt;td&gt;March 24, 2014&lt;/td&gt;
                  &lt;td&gt;17.4&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;3&lt;/td&gt;
                  &lt;td&gt;United States&lt;/td&gt;
                  &lt;td&gt;317,746,000&lt;/td&gt;
                  &lt;td&gt;March 24, 2014&lt;/td&gt;
                  &lt;td&gt;4.44&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;4&lt;/td&gt;
                  &lt;td&gt;Indonesia&lt;/td&gt;
                  &lt;td&gt;249,866,000&lt;/td&gt;
                  &lt;td&gt;July 1, 2013&lt;/td&gt;
                  &lt;td&gt;3.49&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                  &lt;td&gt;5&lt;/td&gt;
                  &lt;td&gt;Brazil&lt;/td&gt;
                  &lt;td&gt;201,032,714&lt;/td&gt;
                  &lt;td&gt;July 1, 2013&lt;/td&gt;
                  &lt;td&gt;2.81&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
        &lt;div style="margin-top: 1rem;"&gt;
          &lt;p&gt;
            Download of chart with html content should work on all browser but not working in Microsoft edge.
          &lt;/p&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div id="testchart"&gt;&lt;/div&gt;
       &lt;/div&gt;
      &lt;div id="bottom-content"&gt;
        &lt;p&gt;Thanks for looking into this issue, struggling to fix this for last 2 days..
        UPDATE: Finally able to fix it. Cheers!!&lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/body&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Required to convert named colors to RGB --&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/canvg/1.4/rgbcolor.min.js"&gt;&lt;/script&gt;
  
  &lt;!-- Optional if you want blur --&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/stackblur-canvas@^1/dist/stackblur.min.js"&gt;&lt;/script&gt;
  
  &lt;script src="https://cdn.jsdelivr.net/npm/canvg/dist/browser/canvg.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/highcharts/5.0.7/highcharts.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.2.61/jspdf.debug.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"&gt;&lt;/script&gt;
  
  &lt;script type="text/javascript"&gt;
  $(document).ready(function() {
      Highcharts.chart('testchart', {
  
          title: {
              text: 'Solar Employment Growth by Sector, 2010-2016'
          },
  
          subtitle: {
              text: 'Source: thesolarfoundation.com'
          },
  
          yAxis: {
              title: {
                  text: 'Number of Employees'
              }
          },
          legend: {
              layout: 'vertical',
              align: 'right',
              verticalAlign: 'middle'
          },
  
          plotOptions: {
              series: {
                  label: {
                      connectorAllowed: false
                  },
                  pointStart: 2010
              }
          },
  
          series: [{
              name: 'Installation',
              data: [43934, 52503, 57177, 69658, 97031, 119931, 137133, 154175]
          }, {
              name: 'Manufacturing',
              data: [24916, 24064, 29742, 29851, 32490, 30282, 38121, 40434]
          }, {
              name: 'Sales &amp; Distribution',
              data: [11744, 17722, 16005, 19771, 20185, 24377, 32147, 39387]
          }, {
              name: 'Project Development',
              data: [null, null, 7988, 12169, 15112, 22452, 34400, 34227]
          }, {
              name: 'Other',
              data: [12908, 5948, 8105, 11248, 8989, 11816, 18274, 18111]
          }],
  
          responsive: {
              rules: [{
                  condition: {
                      maxWidth: 500
                  },
                  chartOptions: {
                      legend: {
                          layout: 'horizontal',
                          align: 'center',
                          verticalAlign: 'bottom'
                      }
                  }
              }]
          }
  
      });
  });
  $("#btnDownload").click(function(){
    var doc = new jsPDF('portrait', 'pt', 'a4', true);
      var elementHandler = {
          '#ignorePDF': function(element, renderer) {
              return true;
          }
      };
  
      var source = document.getElementById("top-content");
      doc.fromHTML(source, 15, 15, {
          'width': 560,
          'elementHandlers': elementHandler
      });
  
      var svg = document.querySelector('svg');
      var canvas = document.createElement('canvas');
      var canvasIE = document.createElement('canvas');
      var context = canvas.getContext('2d');
  
  
  
  
      var data = (new XMLSerializer()).serializeToString(svg);
      canvg(canvas, data);
      var svgBlob = new Blob([data], {
          type: 'image/svg+xml;charset=utf-8'
      });
  
      var url = canvas.toDataURL(svgBlob);//DOMURL.createObjectURL(svgBlob);
  
      var img = new Image();
      img.onload = function() {
          context.canvas.width = $('#testchart').find('svg').width();;
          context.canvas.height = $('#testchart').find('svg').height();;
          context.drawImage(img, 0, 0);
          // freeing up the memory as image is drawn to canvas
          //DOMURL.revokeObjectURL(url);
  
          var dataUrl;
          if (isIEBrowser()) { // Check of IE browser
              var svg = $('#testchart').highcharts().container.innerHTML;
              canvg(canvasIE, svg);
              dataUrl = canvasIE.toDataURL('image/JPEG');
          } else {
              dataUrl = canvas.toDataURL('image/jpeg');
          }
          doc.addImage(dataUrl, 'JPEG', 20, 365, 560, 350); // 365 is top
  
          var bottomContent = document.getElementById("bottom-content");
          doc.fromHTML(bottomContent, 15, 750, {   //700 is bottom content top  if you increate this then you should increase above 365
              'width': 560,
              'elementHandlers': elementHandler
          });
  
          setTimeout(function() {
              doc.save('HTML-To-PDF-Dvlpby-Bhavdip.pdf');
          }, 2000);
      };
      img.src = url;
  });
  function isIEBrowser() {
      var ieBrowser;
      var ua = window.navigator.userAgent;
      var msie = ua.indexOf("MSIE ");
  
      if (msie &gt; 0 || !!navigator.userAgent.match(/Trident.*rv\:11\./)) // Internet Explorer
      {
          ieBrowser = true;
      } else //Other browser
      {
          console.log('Other Browser');
          ieBrowser = false;
      }
  
      return ieBrowser;
  };
  &lt;/script&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>Where I got the code:</strong>
  <a href="https://www.c-sharpcorner.com/article/how-to-convert-html-to-pdf-with-css-and-svgchart-using-jquery/" rel="nofollow noreferrer">https://www.c-sharpcorner.com/article/how-to-convert-html-to-pdf-with-css-and-svgchart-using-jquery/</a></p>
  
  <p><strong>The image that works:</strong>
  <a href="https://miro.medium.com/max/1198/1" rel="nofollow noreferrer">https://miro.medium.com/max/1198/1</a>*n-Q2XBz6CFC1MgMpdab4xQ.jpeg</p>