Screenshots in web html2canvas. How to save to JPG?

How to save the picture in JPG? Save in png - no problem!

Reviewed a lot of material, all in png. I have a few hours.

My code for the png


function capture() {
 // display fields for printing
$(".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:


the <div>
 <input type="submit" value="PNG print" 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>

php page output screenshot


<?
//save.php code

//Show the image echo '<img src="'.$_POST%5B'img_val'%5D.'" alt="'.$_POST%5B'img_val'%5D.'"-->';
echo '<img src="'.$_POST%5B'img_val'%5D.'" alt="'.$_POST%5B'img_val'%5D.'">';

//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);

October 3rd 19 at 02:09
1 answer
October 3rd 19 at 02:11
Solution


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

Change MIME type to "image/jpeg".

Thank you! And why I think that it is necessary to write "image/jpg" - sonya_Schmeler80 commented on October 3rd 19 at 02:14

Find more questions by tags JPEG