jsPDF，来自url的base64图像：未定义dataurl答案

【问题标题】：jsPDF, base64 image from url: dataurl not definedjsPDF，来自url的base64图像：未定义dataurl
【发布时间】：2021-04-12 11:33:02
【问题描述】：

我正在制作按需目录。用户可以将项目保存到本地存储，然后从这些保存的值构建它的目录。在最后一页，他们可以将其导出为 pdf。我将 jsPDF 与一个函数结合使用，从 url 制作 base64 图像。

为了制作 base64 文件，我使用方法 2 来自：How can I convert an image into Base64 string using JavaScript?

我使用 CMS Kirby。我在 php 文件中运行此脚本，因为我需要使用 php 语言来为图像编写正确的 url。

这是完整的功能：

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');
};

问题：

如果我查看控制台，由于某种原因，dataUrl 是“未定义”... 但是这一行：doc.addImage(dataUrl, 'png', 0, 0, 210, 297, undefined, 'FAST'); 需要添加已保存项目的 base64 图像。不知道如何重新编写它……我的脑袋简直快被这段代码打破了……我首先是一个自学编码的平面设计师。

希望有人可以提供帮助:)

【问题讨论】：

标签： javascript base64 undefined jspdf

【解决方案1】：

你可以将base 64字符串放在dataUrl变量中，或者使用其他变量名也没问题。

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

我的 js 中有类似的东西

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

【讨论】：