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>

Cause

The reason for this to happen is due to canvas being transparent. However the transparancy color is black with a transparent alpha-channel so it won't show on screen.

JPEG on the other side doesn't support alpha-channel so that black color which is the default is stripped of its alpha channel leaving a black background.

You PNG supports alpha-channel so it is compatible with the way canvas work.

Solution

To get around this you will have to manually draw in a white background on the canvas before you draw in the image:

var canvas =  $('.jSignature')[0];
var ctx = canvas.getContext('2d');

ctx.fillStyle = '#fff';  /// set white fill style
ctx.fillRect(0, 0, canvas.width, canvas.height);

/// draw image and then use toDataURL() here

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:

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

tl;dr: Don't bother

This might be theoretically possible, but I would recommend against it very strongly. It's possible to create a javascript Img element which refers to an URL the user has typed in. You can then draw this image in an HTML5 canvas.

You can then manually access the data on the canvas and analyze/convert the image to the approriate format. It might then be possible to send this Base64 or URL-encode to a server which could then return the image to the client.

This is of course completely crazy and should NOT be attempted. This solution would require implementing JPG compression in javascript which, although technically possible, is probably not feasible because of browser constraints (eg. speed).

This is definitely possible through HTML5 canvas element. Just draw the image in a canvas. (Make the canvas element hidden if you want). Then use canvas.toDataURL("image/jpeg"); to get the Base64 notation of image in the required format.

Check out : http://davidwalsh.name/convert-canvas-image