Dodaj obraz w formacie pdf, używając jspdf

Question

Używam jspdf do konwersji obrazu do pliku PDF.

Przekonwertowałem obraz na URI, używając base64codu. Problem polega jednak na tym, że w konsoli nie ma błędów ani ostrzeżeń.

Plik PDF jest generowany z tekstem Hello World, ale nie zawiera w nim żadnego obrazu.

Oto mój kod.

function convert(){ 
     var doc = new jsPDF(); 
     var imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg'); 
     console.log(imgData); 
     doc.setFontSize(40); 
     doc.text(30, 20, 'Hello world!'); 
     doc.output('datauri'); 
     doc.addImage(imgData, 'JPEG', 15, 40, 180, 160); 

    } 

Answer 1

Chociaż nie jestem pewien, obraz może nie zostać dodany, ponieważ tworzy się wydruk przed dodaniem. Wypróbuj:

function convert(){ 
    var doc = new jsPDF(); 
    var imgData = 'data:image/jpeg;base64,'+ Base64.encode('Koala.jpeg'); 
    console.log(imgData); 
    doc.setFontSize(40); 
    doc.text(30, 20, 'Hello world!'); 
    doc.addImage(imgData, 'JPEG', 15, 40, 180, 160); 
    doc.output('datauri'); 
} 

Answer 2

Zdefiniowałeś Base64? Jeśli nie zdefiniowałeś, pojawia się ten błąd:

ReferenceError: Base64 is not defined

Answer 3

Uważam, że jest przydatny.

var imgData = 'data:image/jpeg;base64,verylongbase64;' 

var doc = new jsPDF(); 

doc.setFontSize(40); 
doc.text(35, 25, "Octonyan loves jsPDF"); 
doc.addImage(imgData, 'JPEG', 15, 40, 180, 180); 

http://mrrio.github.io/jsPDF/

Answer 4

miałem ten sam problem z Base64 nie jest zdefiniowana. Poszedłem do an online encoder, a następnie zapisałem wynik w zmiennej. To chyba nie jest idealne dla wielu obrazów, ale dla moich potrzeb było to wystarczające.

function makePDF(){ 
    var doc = new jsPDF(); 
    var image = "data:image/png;base64,iVBORw0KGgoAA.."; 
    doc.addImage(image, 'JPEG', 15, 40, 180, 160); 
    doc.save('title'); 
} 

Answer 5

private getImage(imagePath): ng.IPromise<any> { 
      var defer = this.q.defer<any>(); 
      var img = new Image(); 
      img.src = imagePath; 
      img.addEventListener('load',()=>{ 
       defer.resolve(img); 
      }); 


      return defer.promise; 
     } 

zastosowanie wyżej funkcji, aby GetImage obiektu. następnie następujące, aby dodać do pliku pdf pdf.addImage (getImage (url), "png", x, y, szerokość obrazu, wysokość obrazu);

Answer 6

javascript function is like this 

function (imagePath) { 
       var defer = this.q.defer(); 
       var img = new Image(); 
       img.src = imagePath; 
       img.addEventListener('load', function() { 
        defer.resolve(img); 
       }); 
       return defer.promise; 
      }; 

Answer 7

Najpierw trzeba załadować obraz, konwersja danych, a następnie przejść do jspdf (w maszynopisie):

loadImage(imagePath): ng.IPromise<any> { 
    var defer = this.q.defer<any>(); 
    var img = new Image(); 
    img.src = imagePath; 
    img.addEventListener('load',()=>{ 
      var canvas = document.createElement('canvas'); 
      canvas.width = img.width; 
      canvas.height = img.height; 

      var context = canvas.getContext('2d'); 
      context.drawImage(img, 0, 0); 

      var dataURL = canvas.toDataURL('image/jpeg'); 

      defer.resolve(dataURL); 
    }); 

    return defer.promise; 
} 

generatePdf() { 
    this.loadImage('img/businessLogo.jpg').then((data) => { 
     var pdf = new jsPDF(); 
     pdf.addImage(data,'JPEG', 15, 40, 180, 160); 
     pdf.text(30, 20, 'Hello world!'); 
     var pdf_container = angular.element(document.getElementById('pdf_preview')); 
     pdf_container.attr('src', pdf.output('datauristring')); 
    }); 
} 

Answer 8

może trochę późno, ale ja się do tej sytuacji w ostatnim czasie i znaleźć proste rozwiązanie, potrzebne są dwie funkcje.

1. Załaduj obraz.

   function getImgFromUrl(logo_url, callback) { 
       var img = new Image(); 
       img.src = logo_url; 
       img.onload = function() { 
        callback(img); 
       }; 
   } 
   

2. w onload zdarzenia na pierwszym etapie dokonać zwrotnego korzystania z doc jspdf.

   function generatePDF(img){ 
       var options = {orientation: 'p', unit: 'mm', format: custom}; 
       var doc = new jsPDF(options); 
       doc.addImage(img, 'JPEG', 0, 0, 100, 50);} 
   

3. użyj powyższych funkcji.

   var logo_url = "/images/logo.jpg"; 
   getImgFromUrl(logo_url, function (img) { 
       generatePDF(img); 
   });