Angular 8 - PDFMake - несколько изображений - PullRequest
Новая
       63

Angular 8 - PDFMake - несколько изображений

0 голосов
/ 13 апреля 2020

У меня есть массив URL для преобразования в изображения base64, чтобы затем добавить их в PDF с PDFMake, но все изображения не создаются к тому времени

pdfMake.createPdf(documentDefinition).open();

 this.sprinklers.push({'name':'Fan', 'url':'http://localhost:4200/assets/Fan.png', 'count':5,'image':''});
  this.sprinklers.push({'name':'Fan', 'url':'http://localhost:4200/assets/Lepa.png', 'count':5,'image':''});
  this.sprinklers.push({'name':'Fan', 'url':'http://localhost:4200/assets/Iwob.png', 'count':5,'image':''});

for (x =0; x < 3; x++){
  this.get(x);
}

get(i){
this.getBase64ImageFromURL(this.sprinklers[i].url).subscribe(base64data => {
  console.log(base64data);
  this.sprinklers[i].image = 'data:image/jpeg;base64,' + base64data;

});




    getBase64Image(img: HTMLImageElement) {
      // We create a HTML canvas object that will create a 2d image
      var canvas = document.createElement("canvas");
      canvas.width = img.width;
      canvas.height = img.height;
      var ctx = canvas.getContext("2d");
      // This will draw image    
      ctx.drawImage(img, 0, 0);
      // Convert the drawn image to Data URL
      var dataURL = canvas.toDataURL("image/png");
   return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
   }`

    getBase64ImageFromURL(url: string) {
      return Observable.create((observer: Observer<string>) => {
        // create an image object
        let img = new Image();
        img.crossOrigin = 'Anonymous';
        img.src = url;
        if (!img.complete) {
            // This will call another method that will create image from url
            img.onload = () => {
            observer.next(this.getBase64Image(img));
            observer.complete();
          };
          img.onerror = (err) => {
             observer.error(err);
          };
        } else {
            observer.next(this.getBase64Image(img));
            observer.complete();
        }
      });
   }

pdfMake.createPdf(documentDefinition).open(); 
    content: [

                {

                  image: this.sprinklers[1].image,
                  width:50


            },
...