Memory leak issue when frequently operating img in Electron.NET.（23.6.1） #853

New Issue

claunia · 2026-01-29T16:50:10Z

claunia commented

2026-01-29 16:50:10 +00:00

Originally created by @xiaoxinxing12 on GitHub (Mar 28, 2023).

Originally assigned to: @GregorBiswanger on GitHub.

When I use the main thread to capture images through the camera, convert them into base64 strings, send them to the rendering process through IPC, and then display them through img or canvas, it causes the memory of Electron.NET to keep increasing, and eventually it crashes. Are there any other optimization methods for displaying images captured by the main thread in HTML?

 1、canvas
 ipcRenderer.on('asynchronous-reply', (event, arg) => {
                 let img = new Image();
                URL.revokeObjectURL(canvas.toDataURL());
                 canvas.getContext('2d').canvas = null 
                img.onload = function() {
                 canvas.width = img.width;
                  canvas.height = img.height;
                   canvas.getContext('2d').drawImage(img, 0, 0);
                    img=null;
                  };
                  img.src='data:image/png;base64,' + arg;
  });

2、img

 ipcRenderer.on('asynchronous-reply', (event, arg) => {
                if (canvas.src) {
                     URL.revokeObjectURL(canvas.src);
                     img.src = '';
                   }
                 img.src = 'data:image/png;base64,' + arg;
  });

Originally created by @xiaoxinxing12 on GitHub (Mar 28, 2023). Originally assigned to: @GregorBiswanger on GitHub. When I use the main thread to capture images through the camera, convert them into base64 strings, send them to the rendering process through IPC, and then display them through img or canvas, it causes the memory of Electron.NET to keep increasing, and eventually it crashes. Are there any other optimization methods for displaying images captured by the main thread in HTML? ``` 1、canvas ipcRenderer.on('asynchronous-reply', (event, arg) => { let img = new Image(); URL.revokeObjectURL(canvas.toDataURL()); canvas.getContext('2d').canvas = null img.onload = function() { canvas.width = img.width; canvas.height = img.height; canvas.getContext('2d').drawImage(img, 0, 0); img=null; }; img.src='data:image/png;base64,' + arg; }); ``` 2、img ``` ipcRenderer.on('asynchronous-reply', (event, arg) => { if (canvas.src) { URL.revokeObjectURL(canvas.src); img.src = ''; } img.src = 'data:image/png;base64,' + arg; }); ```

claunia added the bug label 2026-01-29 16:50:10 +00:00

claunia closed this issue

2026-01-29 16:50:10 +00:00

claunia commented

2026-01-29 16:50:11 +00:00

@GregorBiswanger commented on GitHub (Mar 28, 2023):

How do you load the data from the camera? Via a .NET API? Or via Nodejs?

What is your technology in .NET? ASP.NET Core or Blazor?

@GregorBiswanger commented on GitHub (Mar 28, 2023): How do you load the data from the camera? Via a .NET API? Or via Nodejs? What is your technology in .NET? ASP.NET Core or Blazor?

claunia commented

2026-01-29 16:50:11 +00:00

@GregorBiswanger commented on GitHub (Mar 28, 2023):

So I've now built a sample application using Blazor Server-Side and Electron.NET. Here I have implemented two different solutions:
https://github.com/GregorBiswanger/BlazorWebcamApp

The .NET solution: The webcam is queried here with the OpenCvSharp Library. This probably requires significantly more memory and energy. My memory grows to about 1.1 GB. But also not higher after longer use. So no program crash. This solution is interesting if you need to access the n byte stream with C#.

The native HTML5 solution: Here I call up the webcam using the HTML5 standard function via JavaScript. Here I notice that significantly less memory and energy is needed. The consumption is a little over 300 MB. Disadvantage, you can hardly access the bytes via C#. It would also be possible but more complicated.

So it's not a memory leak from Electron.NET or the native Electron under the hood.

@GregorBiswanger commented on GitHub (Mar 28, 2023): So I've now built a sample application using Blazor Server-Side and Electron.NET. Here I have implemented two different solutions: https://github.com/GregorBiswanger/BlazorWebcamApp The .NET solution: The webcam is queried here with the OpenCvSharp Library. This probably requires significantly more memory and energy. My memory grows to about 1.1 GB. But also not higher after longer use. So no program crash. This solution is interesting if you need to access the n byte stream with C#. The native HTML5 solution: Here I call up the webcam using the HTML5 standard function via JavaScript. Here I notice that significantly less memory and energy is needed. The consumption is a little over 300 MB. Disadvantage, you can hardly access the bytes via C#. It would also be possible but more complicated. So it's not a memory leak from Electron.NET or the native Electron under the hood.

claunia commented

2026-01-29 16:50:11 +00:00

@xiaoxinxing12 commented on GitHub (Mar 29, 2023):

Blazor

Thank you for answering my question so quickly. I have tested the demo you provided, which has resolved my doubts. I have never worked with Blazor before, and this development mode is fantastic. Thanks again and I wish you a successful work and a happy life.

@xiaoxinxing12 commented on GitHub (Mar 29, 2023): > Blazor Thank you for answering my question so quickly. I have tested the demo you provided, which has resolved my doubts. I have never worked with Blazor before, and this development mode is fantastic. Thanks again and I wish you a successful work and a happy life.

Sign in to join this conversation.

1 Participants

Notifications

Due Date

No due date set.

Dependencies

No dependencies set.

Reference: starred/Electron.NET#853