Which is the fastest way to show an image?

[ferronsnicola]

Hi, I am trying to view the processed image in an html page (using electron and react), i know that there is a toDataUrl() method that transform the image in a string that could be renderized by the browser, but it is super slow (for a 1500x2000px image, it takes about 2 seconds) and not usable for my needs.
Is there a faster way to do that?
Thanks in advance,
Nicola

[targos]

You can have a canvas in your page and draw into it. See the implementation of getCanvas for example:

image-js/src/image/core/export.js

Lines 201 to 218 in e3ba8d4

	/**
	* Creates a new canvas element and draw the image inside it
	* @memberof Image
	* @instance
	* @return {Canvas}
	*/
	getCanvas() {
	const data = new ImageData(
	this.getRGBAData({ clamped: true }),
	this.width,
	this.height,
	);
	let canvas = createCanvas(this.width, this.height);
	let ctx = canvas.getContext('2d');
	ctx.putImageData(data, 0, 0);
	return canvas;
	},
	};

[wc-orbis]

Has anyone found an alternative method to using canvas? I am using this library (which has been fantastic so far!) for 16 bit images, so using canvas is unfortunately not something I can do.