使用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

首先，您需要加载图像，转换数据，然后传递给jspdf（在typescript中）：

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 3

如果你有

ReferenceError：未定义Base64

你可以上传你的文件here你将有一些东西：

数据：图像/ JPEG; BASE64，/ veryLongBase64Encode ....

在你的js做：

var imgData = 'data:image/jpeg;base64,/veryLongBase64Encode....'
var doc = new jsPDF()

doc.setFontSize(40)
doc.addImage(imgData, 'JPEG', 15, 40, 180, 160)

可以看到例子here

Answer 4

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 5

也许有点晚了，但我最近遇到这种情况并找到了一个简单的解决方案，需要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 6

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

ReferenceError：未定义Base64

Answer 7

无需添加任何额外的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");

Answer 8

上面的代码对我不起作用。我发现了新的解决方案

 var pdf = new jsPDF();
 var img = new Image;
 img.onload = function() {
     pdf.addImage(this, 10, 10);
     pdf.save("test.pdf");
 };
 img.crossOrigin = "";  
 img.src = "assets/images/logo.png";

Answer 9

这在Angular 2中对我有用：

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

jsPDF版本1.5.3

assets目录位于Angular项目根目录的src目录中

Answer 10

我发现它很有用。

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 11

我没有定义Base64的问题。我去了an online encoder然后将输出保存到变量中。对于许多图像来说，这可能并不理想，但对于我的需求来说已经足够了。

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 12

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

使用上面的函数来getimage对象。然后将以下内容添加到pdf文件pdf.addImage（getImage（url），'png'，x，y，imagewidth，imageheight）;