How to convert jpg image to png using javascript

Question

Convert JPG image to PNG

I have to convert a jpg image into png image using javascript and resize the image to create a thumbnail of image.

Do you really think that's a browser task? Not even talking about perf. — Michael Laffargue, May 16 '12 at 11:41
If you can use canvas, then you should read following link http://stackoverflow.com/questions/6150289/how-to-convert-image-into-base64-string-using-javascript — Reporter, May 16 '12 at 11:42
similar to http://stackoverflow.com/questions/3975499/convert-svg-to-image-jpeg-png-etc-in-the-browser — Vik, May 16 '12 at 11:42
why should't be a browser task? Often I have the impression some people is afraid of loosing their jobs when I read these kind of comments ? Welcome to the client side era, thanks to emscripten I'm able to compile and run libpng, libwebp etc and run them both in node.js and the browser, same API, almost same speed, (as long as you use a worker) — cancerbero, Jun 19 '19 at 00:21

score 3 · Answer 1 · answered May 12 '19 at 18:51

3

If we have a look at the source from the JPG to PNG website which uses pure javascript to convert images from JPG to PNG. We see that they:

Load the jpg image from file
Create a canvas of the same size as the jpg
Draw the jpg image covering the whole canvas
Convert canvas to blob (if the image is small enough you can also use to .toDataURL())
Download the blob

answered May 12 '19 at 18:51

sazzy4o

2,668
5
33
59

2

Thanks. I've found this useful to convert some corrupted images using Safari on MacOS, because Apple's JPEG decoder seems to recover from errors better than the standard open-source libraries. – mwfearnley Oct 03 '19 at 10:43

score 0 · Accepted Answer · answered May 16 '12 at 11:41

0

you should take a look at processing.js library: http://processingjs.org/reference/PImage_resize_/ http://processingjs.org/reference/save_/

answered May 16 '12 at 11:41

Esse

3,220
2
20
24

score 0 · Answer 3 · answered May 16 '12 at 11:41

It's not impossible to write a pure JavaScript library that allows you to manipulate and convert images, but I don't know any off the top of my head, nor would I use them.

Instead, I'd upload the original image to a server framework of my choice (PHP, ASP.NET, etc.) and have it manipulate the image for you.

score 0 · Answer 4 · answered Jun 19 '19 at 00:18

There are plenty ports of native png/JPEG libraries through emscripten and also a couple written purely in JavaScript, This is what it comes to my mind now:

https://www.npmjs.com/package/jimp

Jimp.read('lenna.png', (err, lenna) => {
  if (err) throw err;
  lenna
    .write('lena-small-bw.jpg'); // save
});

But in general you want to search something like 'png to jpeg' in npm.org you will find plenty libraries.

How to convert jpg image to png using javascript

4 Answers4