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

sazzy4o · Answer 1 · 2023-05-15T21:14:29.203

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 .toDataURL())
Download the blob

edited May 15 '23 at 21:14

answered May 12 '19 at 18:51

sazzy4o

3,073
6
34
62

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 · Answer 2 · 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 3 · 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.

score 0 · Answer 4 · answered Jun 05 '23 at 11:39

To convert a JPG image to PNG using JavaScript, you can utilize the HTML5 canvas element and the toDataURL method. Here's an example of how you can achieve this:

 function convertJpgToPng(jpgUrl, callback) {
      var img = new Image();
      
      img.onload = function() {
        var canvas = document.createElement('canvas');
        canvas.width = img.width;
        canvas.height = img.height;
    
        var ctx = canvas.getContext('2d');
        ctx.drawImage(img, 0, 0);
    
        // Convert the image to PNG format
        var pngDataUrl = canvas.toDataURL('image/png');
        
        // Pass the converted PNG URL to the callback function
        callback(pngDataUrl);
      };
    
      img.src = jpgUrl;
    }

To use this function, you can call it with the URL of the JPG image and provide a callback function to handle the converted PNG URL. Here's an example:

 var jpgUrl = 'path/to/your/image.jpg';

convertJpgToPng(jpgUrl, function(pngUrl) {
  // Use the converted PNG URL as needed
  console.log(pngUrl);
});

you can also check this powerful tool here Convert Images to PNG

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

-1

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,278
2
21
25

How to convert jpg image to png using javascript

5 Answers5