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