javascript - Convert an ImageData object (not a canvas) to image dataURL

It is theoretically possible, but not practical, to
convert an ImageData object to a data
URL without using a Canvas.

An ImageData object has the raw
RGBA representation of the image pixels. A data URL expects
data to be in a recognized MIME format. According to href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types#Image_types"
rel="nofollow noreferrer">MDN, the only widely supported pixel-based image
types are GIF, JPEG, PNG, and ICO. GIF and JPEG are quite complex, all of these formats
have header information, and PNG has a CRC, so it is non-trivial to convert the pixel
data into the image format.

The recommended way to do the
conversion is using the Canvas. You say your attempts
"distorted" the data, but that suggests there was something wrong with how you did it,
since that is really the best supported method as it builds on the internals browsers
use to do all their image manipulation.

Did you check your
context settings? You probably want
ctx.globalCompositeOperation = "copy" instead of the default
"source-over" if you are using alpha.