Добавить изображение в формате pdf с помощью jspdf

Ответ 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');
}

Ответ 2

Вы определили Base64? Если вы не определили, произойдет эта ошибка:

ReferenceError: Base64 не определен

Ответ 3

возможно, немного поздно, но я пришел к этой ситуации недавно и нашел простое решение, необходимы 2 функции.

• Загрузите изображение.

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

Ответ 4

Я считаю это полезным.

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/

Ответ 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");

Ответ 6

У меня была такая же проблема, когда 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');
}

Ответ 7

Приведенный выше код не работает для меня. Я нашел новое решение:

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

Ответ 8

Это сработало для меня в Angular 2:

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

jsPDF версия 1.5.3

Каталог assets находится в каталоге src корня проекта Angular

Ответ 9

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

Ответ 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'));
    });
}

Ответ 11

если у вас есть

ReferenceError: Base64 не определено

Вы можете загрузить свой файл здесь у вас будет что-то как:

данные: изображение /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)

Можете увидеть пример здесь

Ответ 12

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