Uint8ClampedArray图片转为jpg / png

Question

I have an image stored in a Uint8ClampedArray in my web page. I'd like to save this image in a jpg/png file on my server.

I can access to the image executing this code:

canvas.putImageData(imgData,0,0);

// create a new img object
var image=new Image();
// set the img.src to the canvas data url
image.src=canvas.toDataURL();

Now in my image.src I have a very long string which represent the image.

I have two question:

• Do i need to use the canvas to get the img source or I can get it without using it?
• Is it possible to convert the image in a jpg/png file in the browser or I have to do the process in the server?

I'd like to better understand how this process works. Thanks for your help!!

Answer 1

Strictly speaking it's possible to do without canvas the hard way, by implementing your own JPEG encoder from scratch in JS/asm.js/WASM, but with canvas that's much easier.

To get a JPEG the only change you need is to specify the type: toDataURL("image/jpeg") .