2013-09-28 63 views
8

Tôi đang sử dụng jspdf để chuyển đổi hình ảnh thành PDF.Thêm hình ảnh bằng pdf sử dụng jspdf

Tôi đã chuyển đổi hình ảnh thành URI bằng cách sử dụng base64encode. Nhưng vấn đề là không có lỗi hoặc cảnh báo được hiển thị trong bảng điều khiển.

PDF được tạo bằng văn bản Hello World trên đó nhưng không có hình ảnh nào được thêm vào trong đó.

Đây là mã của tôi.

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

    } 
+1

Câu hỏi ở đây là gì? –

Trả lời

9

Mặc dù tôi không chắc chắn, hình ảnh có thể không được thêm vì bạn tạo đầu ra trước khi thêm. Hãy thử:

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

Tất cả các tham số cho hàm addImage là gì? –

+2

@ Grez.Kev Nó đã được một thời gian trước đây, nhưng nếu tôi nhớ chính xác nó là: addImage (hình ảnh, định dạng, xPosition, yPosition, chiều rộng, chiều cao). Tôi hi vọng cái này giúp được! –

5

Bạn đã xác định Base64? Nếu bạn không được xác định, xảy ra lỗi này:

ReferenceError: Base64 is not defined

2

Tôi thấy nó hữu ích.

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/

0

tôi đã cùng một vấn đề với Base64 không được xác định. Tôi đã đi đến an online encoder và sau đó lưu đầu ra vào một biến. Điều này có lẽ không lý tưởng cho nhiều hình ảnh, nhưng với nhu cầu của tôi thì nó là đủ.

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

Bạn có hình ảnh/png nhưng thêm dưới dạng jpg. Điều đó không đúng cách – mplungjan

0
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; 
     } 

sử dụng trên chức năng để getImage đối tượng. sau đó sau để thêm vào tập tin pdf pdf.addImage (getImage (url), 'png', x, y, imagewidth, imageheight);

+0

đây là mã số – Hongyang

+0

javascript để có được hình ảnh giống như thế này. function (imagePath) { var defer = this.q.hoãn lại(); var img = new Image(); img.src = imagePath; img.addEventListener ('tải', hàm() { defer.resolve (img); }); trả lại defer.promise; }; – Hongyang

-1
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; 
      }; 
0

Trước tiên, bạn cần phải tải hình ảnh, chuyển đổi dữ liệu, và sau đó vượt qua để jspdf (trong nguyên cảo):

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

có thể là một chút muộn, nhưng tôi đi đến tình trạng này thời gian gần đây và thấy một giải pháp đơn giản, 2 chức năng là cần thiết.

  1. tải hình ảnh.

    function getImgFromUrl(logo_url, callback) { 
        var img = new Image(); 
        img.src = logo_url; 
        img.onload = function() { 
         callback(img); 
        }; 
    } 
    
  2. trong sự kiện tải trên bước đầu tiên, gọi lại để sử dụng tài liệu 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. sử dụng các chức năng ở trên.

    var logo_url = "/images/logo.jpg"; 
    getImgFromUrl(logo_url, function (img) { 
        generatePDF(img); 
    }); 
    
Các vấn đề liên quan