javascript - 上传的 Canvas 图像比其主要来源大得多

Question

<img id='imgt' src='01.jpg' alt='img'>

此图像为原始 4000x3000px - 0.9MB - 由 css 在 960x540px 上计算

js

    var img = document.getElementById("imgt");
    c1 = document.createElement("canvas");
    var ctx = c1.getContext("2d");

    var a = $('#imgt').width();
    var b = $('#imgt').height();

    c1.width = a;
    c1.height = b;
    ctx.drawImage(img, 0, 0, a, b);

    var dataURL = c1.toDataURL();
    $.ajax({
      url: 'process.php',
      type: 'post',
      data: {'imgBase64': dataURL},
      success: function(data) {
        console.log('ok');
    }
});

process.php

$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
$fileName = 'photo.jpg';
file_put_contents($fileName, $fileData);

起始图像 imgt 为 4000x3000px - 0.9MB。生成的图像 photo.jpg 为 960x540px - 1.05MB

我怀疑生成的图像实际上不是jpg而是png，所以我在js中尝试而不是var dataURL = c1.toDataURL():

var dataURL = c1.toDataURL("image/jpeg");

还有

var dataURL = c1.toDataURL("image/jpeg", 0.95);

在这两种情况下，生成的图像约为 200KB，但在 img 查看器中无法读取 - 它会报告损坏的图像或类似的内容。

有什么帮助吗？

Answer 1

你的怀疑是对的。当您仅使用 var dataURL = c1.toDataURL(); 时，图像默认保存为 png。要将图像保存为 jpeg 并降低质量(大小)，您需要使用 var dataURL = c1.toDataURL("image/jpeg", 0.95) ;。但当您尝试在服务器端解析/解码图像时，实际问题发生了。您试图替换 data:image/png;base64,，它仅适用于 png 格式的图像。由于您尝试将图像保存为 jpeg，因此您需要使用 data:image/jpeg;base64,。因此，服务器端代码将是...

$img = $_POST['imgBase64'];
$img = str_replace('data:image/jpeg;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
$fileName = 'photo.jpg';
file_put_contents($fileName, $fileData);