Export frame as image

[thijstriemstra]

An exportImage method that returns image data (png, etc) for the current wavesurfer frame would be useful.

[thijstriemstra]

it would be good to have a getImage implementation for drawer.multicanvas.js as well. @chrisparton1991 can you take a look at that?

[chrisparton1991]

@thijstriemstra, I don't know how feasible it is to add this to MultiCanvas. I'd need to get the data URLs from each canvas and stitch them together.

I've done some googling, and it seems the way to do this is typically to redraw the data URLs from each canvas onto a separate canvas, then re-export that canvas as a data URL. However, since the point of MultiCanvas is to overcome the size limitations of a single canvas, there wouldn't be much benefit to doing this. Thoughts?

[katspaugh]

Since it would be good, at some point, to make MultiCanvas the default and remove the regular Canvas, I think the algorithm should be the same for both backends:

• Check the size.
• If the size is greater than a single canvas can handle, downscale.
• Draw on a single canvas.
• Export.

[thijstriemstra]

It sounds like things will get a lot more complicated when MultiCanvas is introduced as the default, but I could be wrong. Maybe this ticket should be closed and a future ticket can introduce getImage support for multi-canvas.

[usfslk]

Hi, on wavesurfer docs there's exportImage(format, quality, type) can you please shed a light on those 3 parameters? I'm not sure what values I should use

[thijstriemstra]

@usfslk read the docs at https://wavesurfer-js.org/api/class/src/wavesurfer.js~WaveSurfer.html#instance-method-exportImage