javascript - How to save canvas compressed -

so have upload script save canvas image looks this.

js:

function save_as() { var canvas   = document.getelementbyid("originalcanvas");     var dataurl  = canvas.todataurl(); var filename = document.getelementbyid('sa_filename').value;  if(filename.length < 3) {     cerror('filenameshort'); } else if(filetype == 'none') {     cerror('filetypenotselected'); }     else {     // call upload.php , post data     $.ajax({       type: "post",       url: "file-upload/uploadas.php",       data: {image: dataurl, filetype: filetype, filename: filename}     }).done(function( respond ) {      console.log("saved filename: "+respond);     }); } } 

php:

<?php if (isset($_post["image"]) && !empty($_post["image"])) {     if (isset($_post["filetype"]) && !empty($_post["filetype"])) {        if (isset($_post["filename"]) && !empty($_post["filename"])) {          // image data         $data = $_post['image'];         $filename = $_post["filename"] . '.' . $_post["filetype"];          list($type, $data) = explode(';', $data);         list(, $data) = explode(',', $data);         $data = base64_decode($data);           $file = $filename;         file_put_contents($file, $data);         echo $file;         }     } } ?> 

the user has option save canvas different file extensions. problem script save canvas different file extensions, not compress them, file size stays same no matter file type save as, there way compress these images in same script? saved real png, jpg, bmp, webp or gifs instead of now?

the default save format png or image/png. if not specified save format:

var dataurl  = canvas.todataurl();  // png 

in order save jpeg need specify (quality argument optional jpeg , defaults 0.9 if not specified):

var dataurl  = canvas.todataurl('image/jpeg', quality); // opt. quality [0, 1] 

you can try other formats not browsers supports formats. if browser doesn't revert png seem case.

you can detect actual image format used looking @ returned string (the data-uri). contain mime-type used.