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

    }

- Navya

---

这里的问题是什么？ - Suresh Atta

他或她希望图片能够显示在 PDF 上，这只是一个猜测。 - Brainmaniac

@Brainmaniac 瞎猜一下 /:) 我想这个问题是在编辑之前或类似的情况下提出的。 - ehab

Answer 1

这对我在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目录中

- atik

---

这对我有效。直到我在addImage中添加'png'，它才起作用。 - Rhokai

在我指定扩展名时也不起作用。处理程序:“错误：不完整或损坏的PNG文件”。 - PatricNox

当我将src设置为base64编码的图像时，这对我起作用了。 - Brummy

Answer 2

虽然我不确定，但可能是因为您在添加图像之前创建了输出，导致图像未被添加。请尝试：

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

- Leon Hooijer

---

addImage函数的所有参数是什么？ - Grez.Kev

很久以前就有了，但如果我没记错的话，它应该是：addImage(image, format, xPosition, yPosition, width, height)。希望这有所帮助！ - Leon Hooijer

这是addImage（imageData，format，x，y，width，height，alias，compression，rotation）。阅读https://rawgit.com/MrRio/jsPDF/master/docs/module-addImage.html。 - Joel G Mathew

Base64.encode('filename.jpeg') 这个方法只会对文件名进行编码，不会对图片本身进行编码。 - Ivan Ferrer

我们能否将高度和宽度设为100%？我的意思是，我们能否使图像根据PDF中可用的空间自适应大小。 - Lokesh Thakur

Answer 3

可能有点晚了，但我最近遇到这个问题，并找到了一个简单的解决方案，需要两个函数。

1. 加载图片。

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

在第一步的onload事件中，使用回调函数来使用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);}

使用上述函数。

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

- AlanMo

---

什么是自定义格式：custom？我收到了错误Uncaught ReferenceError：custom未定义。 - Naren Verma

Answer 4

不需要添加任何额外的base64库。简单的5行代码解决方案 -

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

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

- Abhishek Sinha

---

path.resolve 是 Node JS 中的函数，它主要是为了找出与你的文件相关的正确文件路径。如果你不想使用它，你可以提供文件源(/something/something/myfile.jpg)，而不是 path.resolve() 的结果。 - Abhishek Sinha

你正在加载一个“jpg”文件，但在doc.addImage中将其设置为“png”。 - Paul Verschoor

@MustkeemK 你可以通过这个链接查看：https://artskydj.github.io/jsPDF/docs/module-addImage.html - Abhishek Sinha

在后续版本中，addImage函数需要4个参数。 - PatricNox

我们能否使用doc.open("new.pdf")来在新的标签页/窗口中打开PDF文件，而不是使用doc.save("new.pdf")？ - shavy

Answer 5

你是否定义了Base64？如果没有定义，将会出现以下错误：

ReferenceError: Base64未定义

- annelorayne

---

您可以使用在线转换器并将字符串插入到您的代码中。https://www.base64-image.de/ - David D.

Answer 6

上述代码对我没有起作用。 我找到了新的解决方案：

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

- punitha puni

Answer 7

我觉得这很有用。

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/

- Saboor Awan

Answer 8

我曾经也遇到过Base64未定义的问题。我去了一个在线编码器，并将输出保存到一个变量中。这对于许多图片来说可能不是理想的解决方案，但对于我的需求来说已经足够了。

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

- MrGood

---

你有一个image/png的文件，但添加成了jpg格式。这听起来不对。 - mplungjan

@mplungjan data:image/png 只是打字错误，使用 data:image/jpeg 一切都正常。 - Oda Mitsuru

Answer 9

如果你遇到了以下错误：

ReferenceError: Base64 is not defined

你可以上传你的文件 这里 ，你会得到类似下面的东西：

data:image/jpeg;base64,/非常长的Base64编码....

在你的JS代码中写上：

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

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

可以在这里看到最初的回答示例。

- Ibrahima Timera

Answer 10

首先需要加载图像，转换数据，然后将其传递给 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'));
    });
}

- Gerard Carbó