JS-Convert an Image object to a jpeg file

Question

So, I have a user input which serve to upload pictures. This is a simple example:

function handleImage(e){
    var reader = new FileReader();
    reader.onload = function(event){
        var img = new Image();
        img.onload = function(){
            console.log (img);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);     
}

<input type="file" onchange="handleImage(event)"><br>

As you can see, I display an Image () on the console. I want to convert this Image into a jpg file.

I understood how to get the pixels of the picture but it's completely crazy to send it to a server: It's to large!

I also tried to access to the jpg file stored in the computer but I do not achieve to anything.

The only way I found is to send it with a form like this:

<form action="anything.php" method="post" enctype="multipart/form-data">
    <input type="file" name="fileToUpload" id="fileToUpload">
</form>

And in PHP:

$_FILES["fileToUpload"]["tmp_name"]

Why not with JS?

My final goal is to send the jpg file with AJAX.

Tell me if you have some questions.

score 10 · Accepted Answer · 2017-12-20T22:09:03.013

The simplest way is to use a canvas element and then invoke a download action allowing the user to select where to save the image.

You mention that the image is large, but not how much - be aware that with canvas you will also run into restrictions when the image source starts to touch around the 8k area in pixel size.

A simplified example (IE will require a polyfill for toBlob()).:

Load image source via input
Use File blob directly as image source via URL.createObjectURL()
When loaded, create a temporary canvas, set canvas size = image size and draw in image
Use toBlob() (more efficient on memory and performance and require no transcoding to/from Base64) to obtain a Blob.
We'll convert the Blob to File (a subset object and it will reference the same memory) so we can also give a filename as well as (important!) a binary mime-type.

Since the mime-type for the final step is binary the browser will invoke a Save as dialog.

document.querySelector("input").onchange = function() {
  var img = new Image;
  img.onload = convert;
  img.src = URL.createObjectURL(this.files[0]);
};

function convert() {
  URL.revokeObjectURL(this.src);             // free up memory
  var c = document.createElement("canvas"),  // create a temp. canvas
      ctx = c.getContext("2d");
  c.width = this.width;                      // set size = image, draw
  c.height = this.height;
  ctx.drawImage(this, 0, 0);
  
  // convert to File object, NOTE: we're using binary mime-type for the final Blob/File
  c.toBlob(function(blob) {
    var file = new File([blob], "MyJPEG.jpg", {type: "application/octet-stream"});
    window.location = URL.createObjectURL(file);
  }, "image/jpeg", 0.75);  // mime=JPEG, quality=0.75
}

// NOTE: toBlob() is not supported in IE, use a polyfill for IE.

<label>Select image to convert: <input type=file></label>

Update: If you just are after a string (base-64 encoded) version of the newly created JPEG simply use toDataURL() instead of toBlob():

document.querySelector("input").onchange = function() {
  var img = new Image;
  img.onload = convert;
  img.src = URL.createObjectURL(this.files[0]);
};

function convert() {
  URL.revokeObjectURL(this.src);             // free up memory
  var c = document.createElement("canvas"),  // create a temp. canvas
      ctx = c.getContext("2d");
  c.width = this.width;                      // set size = image, draw
  c.height = this.height;
  ctx.drawImage(this, 0, 0);
  
  // convert to File object, NOTE: we're using binary mime-type for the final Blob/File
  var jpeg = c.toDataURL("image/jpeg", 0.75);  // mime=JPEG, quality=0.75
  console.log(jpeg.length)
}

<label>Select image to convert: <input type=file></label>

Thank you for your work. However I have not directly access to the jpeg file. What I exactly want is to have the value of the file you created in a variable as a string value. — SphynxTech, Dec 20 '17 at 21:53
@S.P.H.I.N.X just replace c.toBlob with c.toDataURL("image/jpeg") which is synchronous. — , Dec 20 '17 at 22:07
You should use [FormData](https://developer.mozilla.org/en-US/docs/Web/API/FormData) and blob to upload it if you wish PHP to recognize it as a file. and save yourself some bandwidth, there is no need to change the mime type — Endless, Dec 20 '17 at 23:13

score 0 · Answer 2 · answered Dec 20 '17 at 20:39

JavaScript on the client side can not save files. You have multiple options:

Render the image on an <canvas> element. This way it can be saved with right click -> save image
Inset the image as <img> element. This way it can be saved with right click -> save image
Send the image data as base64 string to the server. Do the processing there
Use a server side language like PHP or Node.js to save the file

Long story short, you have to use some server side logic to save the file on disk

JS-Convert an Image object to a jpeg file

2 Answers2