javascript - jsPDF, base64 image from url: dataurl not defined

Question

I'm making an ondemand catalogue. The user can save items to the localstorage and next build it's catalogue from these saved value's. On the final page they are able to export this to a pdf. I use jsPDF in combination with a function to make base64 images from a url.

For making the base64 file I'm using approach 2 from: How can I convert an image into Base64 string using JavaScript?

I use the CMS Kirby. I run this script in a php-file because I need to have the php-language to compose the right url to the image.

Here is the full function:

function pdfmerge() {
  const doc = new jsPDF('p', 'mm','a4',true);
  doc.setFontSize(30);
  doc.text('Title', 8, 20);
  doc.text('On-demand Catalog', 8, 30);

  for (let i = 0; i < localStorage.length; i++)   {
      if (localStorage.getItem(localStorage.key("kirby$language"))) {
          localStorage.removeItem("kirby$language");
      } else {
      };
      var num = localStorage.getItem(localStorage.key(i));
      doc.addPage();
      doc.setFontSize(10);

      function toDataURL(src, callback, outputFormat) {
        var img = new Image();
        img.crossOrigin = 'Anonymous';
        img.onload = function() {
          var canvas = document.createElement('CANVAS');
          var ctx = canvas.getContext('2d');
          var dataURL;
          canvas.height = this.naturalHeight;
          canvas.width = this.naturalWidth;
          ctx.drawImage(this, 0, 0);
          dataURL = canvas.toDataURL(outputFormat);
          callback(dataURL);
        };
        img.src = src;
        if (img.complete || img.complete === undefined) {
          img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
          img.src = src;
        }
      };
      toDataURL(
        '<?= $site->find('full-catalogue') ?>' + '/' + num + '.png', // the url of the image
        function(dataUrl) {
          console.log('RESULT:', dataUrl);
        }
      );
      doc.addImage(dataUrl, 'png', 0, 0, 210, 297, undefined, 'FAST'); 
      doc.text(num, 8, 6);

  };
  
  doc.save('re-FORMAT_cat.pdf');
};

The problem:

For some reason the dataUrl is 'not defined' if I view the console… However this line: doc.addImage(dataUrl, 'png', 0, 0, 210, 297, undefined, 'FAST'); needs to add the base64 image of the saved item. Not sure how to reformulate it… my head is literaly breaking over this piece of code… I'm foremost a graphic designer who teached himeself to code.

Hope someone can help :)

question from:https://stackoverflow.com/questions/65600544/jspdf-base64-image-from-url-dataurl-not-defined

Answer 1

You can put the base 64 string in the dataUrl variable, or use another variable name for no problem.

dataUrl = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
doc.addImage(dataUrl, 'png', 0, 0, 210, 297, undefined, 'FAST'); 

I have something similar in my js

var imgData = 'data:image/jpeg;base64,iVBORw0K . . . . . . . . . . . . . ';
doc.addImage(imgData, 'JPEG', 30, 80, 400, 400);