Screenshots on the web - html2canvas. How to save as JPG?

Question

JPEG

How to save an image as a JPG? Save as png - no problem!

Revised a lot of material, all in png. I've been fighting for several hours now.

My png code

function capture() {
  // отобразим поля для печати
  $(".specitnamerightcolumn").show();
  $("#hiddenrightcolumn").show();
  $("#bottomsign").show();
  //$("tr.daytitles").next("tr").next("tr").next("tr").hide();
  $("tr.daytitles").parent().find("tr:gt(21)").hide();
  html2canvas($('#tocanvas'), {
    /*backgrounnd:'#fff',*/
    onrendered: function (canvas) {
      
      //Set hidden field's value to image data (base-64 string)
      $('#img_val').val(canvas.toDataURL("image/jpg"));
      //Submit the form manually
      document.getElementById("myForm").submit();
    }
  });
// }

front-end:

<div>
  <input type="submit" value="PNG для печати" onclick="capture();" /><form method="POST" enctype="multipart/form-data" action="./canvas/save2canvas.php" id="myForm">
      <input type="hidden" name="img_val" id="img_val" value="" /></form>
</div>

screenshot output php page

<?
//save.php code
 
//Show the image echo '';
echo '';
 
//Get the base-64 string from data
$filteredData=substr($_POST['img_val'], strpos($_POST['img_val'], ",")+1);
 
//Decode the string
$unencodedData=base64_decode($filteredData);
 
//Save the image
file_put_contents('img.jpg', $unencodedData);

Answer 1

$('#img_val').val(canvas.toDataURL("image/jpg"));

Change MIME type to "image/jpeg".