Question

所以我有这个上传脚本将我的画布保存为看起来像这样的图像。

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 and post the 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"])) {

        // get the 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;
        }
    }
}
?>

用户可以选择使用不同的文件扩展名保存画布。但是这个脚本的问题在于它确实将画布保存到不同的文件扩展名，它不会压缩它们，无论你保存什么文件类型，文件大小保持不变，有没有办法压缩这些图像相同的脚本？那么他们被保存为真正的PNG，JPG，BMP，Webp或GIF而不是现在的样子？

Answer 1

默认保存格式始终为PNG或image/png。如果未指定，则这将是保存格式：

var dataURL  = canvas.toDataURL();  // always PNG

为了保存为JPEG，你需要指定它（质量参数对于JPEG是可选的，如果没有指定则默认为0.9）：

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

您也可以尝试其他格式，但并非所有浏览器都支持所有格式。如果浏览器没有，它将始终恢复为PNG，这似乎是这种情况。

您可以通过查看返回的字符串（data-uri）来检测所使用的实际图像格式。它将包含使用的mime类型。

如何保存画布压缩

1 个答案: