Как изменить с png к jpg в CANVAS?

Question

[Dolosweb]

Такая проблема: В при выборе изображение - она уменьшается в canvas, но расширение выходит png, а мне надо jpg.
Где надо правку сделать или возможно ли сделать такое?

Неадекватные мимо

var width = 600;

function resize(img, w, h) {
  var canvas = document.createElement('canvas');
  canvas.width = w;
  canvas.id = 1;
  canvas.height = h;
  canvas.getContext('2d').drawImage(img, 0, 0, w, h);
  return canvas;
}

function imageLoader(src) {
  var df = $.Deferred();
  var img = new Image();
  img.onload = function() {
    df.resolve(img);
  };
  img.onerror = function() {
    df.reject(img);
  };
  img.src = src;
  return df.promise();
}


$('#file').on('change', function() {
  var images = $.map($('#file').prop('files'), function(file) {
    return imageLoader(URL.createObjectURL(file));
  });
  $.when.apply(null, images).done(function() {
    $.each(arguments, function(i, img) {
      var height = Math.round(width * img.height / img.width);

      $(img).attr({width: width, height: height});
      canvas = resize(img, width, height);
      $('#outer_images').append(
        $('<div class="left max-40 box">').append([canvas])
      );
		
			
    });
  });
});

Answer 1

[Григорий Кутарев]

Если изображение нужно потом просто вставить в страницу:

canvas.toBlob(function(blob) {
	var img = $('<img>');
	img.attr('src', window.URL.createObjectURL(blob));
	$('#outer_images').append(
		$('<div class="left max-40 box">').append([img])
	);
}, 'image/jpeg', 0.7);