Friday, 14 September 2018

Ionic read file from system and put it in canvas

Im trying to read file stored in file system (android) and then put the content into canvas using pdfjs library so I could render it in view. Idid the same with system pdf viewer and it worked, but I need to do later some painting on it and manupulation so it can't be dispsplayed in viewer, it must be within my app.

Rendering of my pdf works fine, since I have tested it with live reload mode.

Below is reading code

readFile( pathToFile ){
    this.file.resolveLocalFilesystemUrl( pathToFile).then((fileEntry: any) => {
      fileEntry.file( (file) => {
        var reader = new FileReader();
        reader.onloadend =  (event) => {
          const x = event.target as any;
          // let sliced = x._result.slice(x._result.indexOf(',') + 1, x._result.length);
          console.log('item', x)
          console.log('item', x.result)
          console.log('buffer',new Uint8Array(x.result))
          // console.log('64', new Uint8Array(x._result));
          // const bytes = this.base64ToUint8Array(sliced)
          this.renderPDF(x.result, this.container.nativeElement, 1)
        };
        reader.readAsArrayBuffer(file);
      });
    });
  }

here are the logs: enter image description here

as you can see pdf1 ist the last log so the promise from getDocument gets not resolved:

renderPDF(url, canvasContainer, scale) {
    console.log('pdf1')
    this.pdfCreator.disableWorker = true;
    this.pdfCreator
      .getDocument(url)
      .then((doc) => {
        this.doc = doc;
        console.log('pdf2')

        this.renderPages(canvasContainer, scale);
      })
      .catch(err => console.log(err))
  }

I have spent two days on it without sccess...



from Ionic read file from system and put it in canvas

No comments:

Post a Comment