使用jspdf以pdf格式添加图像

Question

我正在使用jspdf将图像转换为PDF.

我已使用base64encode将图像转换为URI.但问题是控制台中没有显示错误或警告.

生成带有文本Hello World的PDF但不添加任何图像.

这是我的代码.

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

虽然我不确定,但是在添加图像之前创建输出可能不会添加图像.尝试:

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

也许有点晚了,但我最近遇到这种情况并找到了一个简单的解决方案,需要2个功能.

1. 加载图像.

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

2. 在第一步的onload事件中,进行回调以使用jspdf doc.

   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. 使用上述功能.

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

Answer 3

这在Angular 2中对我有用

var img = new Image()
img.src = 'assets/sample.png'
pdf.addImage(img, 'png', 10, 78, 12, 15)

jsPDF版本1.5.3

资产目录位于Angular项目根目录的src目录中

Answer 4

你定义了Base64？如果未定义,则会出现此错误:

ReferenceError:未定义Base64

Answer 5

无需添加任何额外的base64库。简单的5线解决方案-

var img = new Image();
img.src = path.resolve('sample.jpg');

var doc = new jsPDF('p', 'mm', 'a3');  // optional parameters
doc.addImage(img, 'PNG', 1, 2);
doc.save("new.pdf");