Safari canvas memory issue

[Klaasvaak]

There is a known HTMLCanvasElement memory issue in (older) Safari version. It's discussed in this article: https://pqina.nl/blog/total-canvas-memory-use-exceeds-the-maximum-limit/

It suggest cleaning up the canvas after usage. Meaning this:

    canvas.width = 1;
    canvas.height = 1;
    const ctx = canvas.getContext('2d');
    ctx && ctx.clearRect(0, 0, 1, 1);

This will ensure the canvas in memory is not using a lot of memory. Another solution would be to delegate this issue to the implementor of this package by having canvas as an argument in heicTo

[hoppergee]

Hi @Klaasvaak , thanks for the suggestions.

I also found a discussion here: fabricjs/fabric.js#7923 . But it seems not being used in the fabric source code.

Another solution would be to delegate this issue to the implementor of this package by having canvas as an argument in heicTo

I'm OK with this way. However it will be better if we can solve this within package. Do we have any standard or popular way to handle this? Or have you seen any lib are using this manner?

[Klaasvaak]

@hoppergee in my experience, when you don't need the canvas any more you can "release" it with below code. In my experience setting the width and height to 0 doesn't seem to work, 1 does. It's the example code from the blogpost I shared.

In your code after calling toBlob it seems like you're not using the canvas anymore. So that seems like a good place to release it.

function releaseCanvas(canvas) {
    canvas.width = 1;
    canvas.height = 1;
    const ctx = canvas.getContext('2d');
    ctx && ctx.clearRect(0, 0, 1, 1);
}

It would also be nice to export the decodeBuffer function. If someone wants to render the heic file to a canvas in the DOM, they can do it directly using decodeBuffer and removing the need for this intermediate canvas.