Angular application - Memory leak when using Painterro and mounting multiple images in queue

Viewed 229

I'm using Painterro that I have embedded in my Angular application in one of the components. I have a queue/list of images that are fetched from a remote server and the user have the possibility to add annotation on those images using Painterro. Every time the user click next a new image is loaded to Painterro. My issue:

Even if no annotation is made on the current image the memory increase very quickly until the browser crash.

I'm my component Constructor I'm initializing the Painterro like this

 initPainterro() {
this.painterro = Painterro({
  saveHandler: (image, done) => {
    this.pdfReaderService.pdfPagesAsImages[this.pdfReaderService.currentPage.value] = image.asDataURL();
    done(false);
  },
  hiddenTools: ['crop', 'open', 'close', 'pixelize', 'eraser', 'resizeScale', 'resizeResize', 'redo', 'save'],
  language: 'he',
  colorScheme: {
    main: '#004582',
    control: '#ec8617',
    activeControl: '#a95710',
    controlContent: '#002e65'
}
});

}

then I'm attaching the painterro to an HTML element of my htmlTemplate

 ngAfterViewInit(): void {
// this.elm.nativeElement.appendChild(this.painterro.holderEl);

}

and every time the user clicks next to load images on Painterro I'm using this.painterro.show method to mount the current image.

this.painterro.show(this.pdfReaderService.pdfPagesAsImages[this.currentPage]);

I didn't find a way to unmount the previous image and release memory. The Painterro clear() and hide() does not clear the memory.

Is there a way to release memory on previous mounted images on Painterro?

thank you for your help

1 Answers

For anyone who is using Painterro Angular, please follow the official integration hint, created by me as I am creator of Painterro : How to add Painterro into Angular app

No memory leaks are detected if you are using this way.

Related