How to Produce Multiple Outputs Properly?

[kaya51]

Let's say I have one image and I want tor resize it to multiple sizes. I believe some sort of freeing happens and I can't use it a second time. clone method exists but if I use number of sizes - 1 clones sometimes the original copy finished and frees and I get an error. If I clone to the exact number it feels like the original copy is wasted. What's the proper way to do it? Also please consider that the number of sizes might change in time.

[dlemstra]

You can only use the image inside the delegate. Are you returning it outside that method?

[kaya51]

Yes. I'm gonna convert it into base64, then send it with postMessage.
I'm looking for the best performant one.

Assume this exists in all.

const sizes = [48, 96];
function process(image, size) {
	image.crop(new MagickGeometry('2:1'), Gravity.Center);
	image.resize(size * 2, size);
	image.write(MagickFormat.WebP, data => {
		const base64 = `data:image/webp;base64,${ Buffer.from(data).toString('base64') }`;
		console.log(base64);
	});
}

For example this is OK.

ImageMagick.read(imageBytes, image => {
	process(image, sizes[0]);
});

This is OK too but I believe it reads more than once.

sizes.forEach(size => {
	ImageMagick.read(imageBytes, image => {
		process(image, size);
	});
});

This or something like this was giving an error, indicating that image was freed. I couldn't reproduce it.

ImageMagick.read(imageBytes, image => {
	const [size, ...rest] = sizes;

	rest.forEach(size => {
		image.clone(clone => {
			process(clone, size);
		});
	});

	process(image, size);
});

This seems like the best to do but feels like image is wasted becasue it's never touched.

ImageMagick.read(imageBytes, image => {
	sizes.forEach(size => {
		image.clone(clone => {
			process(clone, size);
		});
	});
});

[dlemstra]

The last option is porbably the best one but you can do a small optimization:

const sizes = [48, 96];
function process(image, size) {
    //image.crop(new MagickGeometry('2:1'), Gravity.Center);
    image.resize(size * 2, size);
    image.write(MagickFormat.WebP, data => {
        const base64 = `data:image/webp;base64,${ Buffer.from(data).toString('base64') }`;
        console.log(base64);
    });
}

ImageMagick.read(imageBytes, image => {
    // You only need to do this once.
    image.crop(new MagickGeometry('2:1'), Gravity.Center);
    sizes.forEach(size => {
        image.clone(clone => {
            process(clone, size);
        });
    });
});

But this can be optimized even further and I have made some changes for that in the dotnet version of this library but that has not yet been added here. The TLDR of that feature would be that you can do a clone and resize in a single operation and that would reduce the memory usage.

[kaya51]

Thank you.