Question

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

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

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 viewer中无法读取 - 它会报告损坏的图像或类似的内容。

任何帮助？

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

上传的画布图像比其主要来源

1 个答案: