javascript - jsPDF addImage 返回具有多个图像的相同图像

Question

尝试使用 didDrawPage 将多个图像添加到 jsPDF 时，我有一个奇怪的行为 有些图标是相同的，而其他图标处理得很好，请参见下面的图像和代码，我添加了评论作为以及正确显示哪些图像的代码

didDrawPage: function (data) {
          var pageSize = doc.internal.pageSize;
          var pageHeight = pageSize.height ? pageSize.height : pageSize.getHeight();
          var pageWidth = pageSize.width ? pageSize.width : pageSize.getWidth();

          // Header
          doc.setFontSize(11);
          doc.setTextColor(134,142,150);

          //Logo
          var imgLogo = new Image();
          imgLogo.src = 'img/logo.png'
          doc.addImage(imgLogo, 'JPEG', 30, 30, 144, 42.4); //shows correct image

          var imgBuilding = new Image();
          imgBuilding.src = 'img/building_dark.png'
          doc.addImage(imgBuilding, 'PNG', pageWidth - 50, 30, 14, 14, 'right'); //shows correct image
          doc.text('Company Name', pageWidth - 60, 40, null, null, 'right');

          var imgPhone = new Image();
          imgPhone.src = 'img/phone_dark.png'
          doc.addImage(imgPhone, 'PNG', pageWidth - 50, 50, 14, 14, 'right'); //shows same image as imgBuilding
          doc.text('Phone Number', pageWidth - 60, 60, null, null, 'right');

          var imgEmail = new Image();
          imgEmail.src = 'img/email_dark.png'
          doc.addImage(imgEmail, 'PNG', pageWidth - 50, 70, 14, 14, 'right'); //shows same image as imgBuilding
          doc.text('Emailaddress', pageWidth - 60, 80, null, null, 'right');

          doc.setLineWidth(2);
          doc.setDrawColor(38, 38, 38);
          doc.line(15, 100, pageWidth - 30, 100);

          // Footer

          doc.setLineWidth(30);
          doc.setDrawColor(38, 38, 38);
          doc.line(0, pageHeight - 15, pageWidth, pageHeight - 15);

          var imgBuildingWhite = new Image();
          imgBuildingWhite.src = 'img/building_white.png'
          doc.addImage(imgBuildingWhite, 'PNG', 15, pageHeight - 22, 14, 14); //shows correct image
          var str = "Address Line 1 Address Line 2"
          doc.setFontSize(10);
          doc.setTextColor(255, 255, 255);
          doc.text(str, 40, pageHeight - 12);
          doc.text('Domain.com', pageWidth - 40, pageHeight - 12, null, null, 'right');

          var websiteWhite = new Image();
          websiteWhite.src = 'img/website_white.png'
          doc.addImage(websiteWhite, 'PNG', pageWidth - 30, pageHeight - 23, 15, 15); //shows correct image
        },
      });

Answer 1

您的图片共享一个别名，名为“right”。

代替

doc.addImage(imgBuilding, 'PNG', pageWidth - 50, 30, 14, 14, 'right');
doc.addImage(imgPhone, 'PNG', pageWidth - 50, 50, 14, 14, 'right');
doc.addImage(imgEmail, 'PNG', pageWidth - 50, 70, 14, 14, 'right');

使用

doc.addImage(imgBuilding, 'PNG', pageWidth - 50, 30, 14, 14, 'building');
doc.addImage(imgPhone, 'PNG', pageWidth - 50, 50, 14, 14, 'phone');
doc.addImage(imgEmail, 'PNG', pageWidth - 50, 70, 14, 14, 'email');