如何通过AJAX将多个Canvas生成的图像（Base64）保存到服务器

// 假设 $.sig.signatures 结构如下：
// $.sig.signatures = {
//     "signatureTarget1": { url: "data:image/png;base64,...", hasSignature: true },
//     "signatureTarget2": { url: "data:image/png;base64,...", hasSignature: false },
//     // ...
// };

function getUploadData() {
    var signatureDataCollection = {}; // 用于存储所有签名的Base64数据

    // 遍历所有签名，只收集已签名的Canvas数据
    $.each($.sig.signatures, function (targetId, signatureInfo) {
        if (signatureInfo.hasSignature === true && signatureInfo.url !== null) {
            // 将签名的Base64 URL以键值对形式添加到集合中
            signatureDataCollection[targetId] = signatureInfo.url;
        }
    });

    return signatureDataCollection;
}

// 假设有其他表单数据
var formDetails = {
    customerName: "John Doe",
    orderId: "12345",
    // ... 其他表单字段
};

// 将签名数据添加到表单详情中
formDetails.signatures = getUploadData();

// 使用jQuery的AJAX方法发送数据
$.ajax({
    type: "POST",
    url: "save_signatures.php", // 服务器端处理脚本的URL
    // 将整个数据对象JSON序列化后作为 'info' 参数发送
    data: {
        info: JSON.stringify(formDetails)
    },
    // 注意：如果 data 是一个普通对象，jQuery 会默认使用 application/x-www-form-urlencoded
    // 如果希望发送纯 JSON 请求体，需要设置 contentType: "application/json"
    // 但根据原始问题，服务器端使用 $_POST['info']，所以这种方式是匹配的
    success: function(response) {
        console.log("签名保存成功:", response);
        // 处理成功响应
    },
    error: function(xhr, status, error) {
        console.error("签名保存失败:", error);
        // 处理错误
    }
});

<?php

// 确保请求方法是POST
if ($_SERVER['REQUEST_METHOD'] === 'POST') {
    // 接收并解码客户端发送的JSON数据
    // 注意：如果客户端发送的是 application/json 类型的请求体，
    // 则应使用 file_get_contents('php://input') 来获取原始POST数据。
    // 但根据客户端发送 { info: JSON.stringify(formDetails) } 的方式，
    // 数据会以 application/x-www-form-urlencoded 形式发送，因此 $_POST['info'] 是正确的。
    $info_json_string = $_POST['info'] ?? '';
    $data = json_decode($info_json_string);

    if (json_last_error() !== JSON_ERROR_NONE) {
        http_response_code(400);
        echo json_encode(['status' => 'error', 'message' => 'Invalid JSON data.']);
        exit;
    }

    // 验证和处理其他表单数据 (例如 $data->customerName, $data->orderId)
    // ...

    // 检查是否存在签名数据
    if (isset($data->signatures) && is_object($data->signatures)) {
        $upload_dir = 'uploads/signatures/'; // 存储签名的目录
        if (!is_dir($upload_dir)) {
            mkdir($upload_dir, 0777, true); // 如果目录不存在则创建
        }

        foreach ($data->signatures as $signatureId => $base64Data) {
            // 移除Base64数据URL前缀
            $base64Data = str_replace('data:image/png;base64,', '', $base64Data);
            // 替换空格为+，以确保Base64解码正确
            $base64Data = str_replace(' ', '+', $base64Data);

            // 解码Base64字符串为二进制图像数据
            $imgBinaryData = base64_decode($base64Data);

            if ($imgBinaryData === false) {
                error_log("Failed to decode base64 for signature: " . $signatureId);
                continue; // 跳过当前签名，处理下一个
            }

            // 生成唯一文件名，例如结合签名ID和时间戳
            $filename = $upload_dir . $signatureId . '_' . uniqid() . '.png';

            // 将二进制数据写入文件
            $success = file_put_contents($filename, $imgBinaryData);

            if ($success) {
                // 签名图片保存成功，可以记录到数据库或进行其他处理
                // 例如：保存 $filename 到数据库中与订单或客户关联
                echo "Signature " . $signatureId . " saved to " . $filename . "\n";
            } else {
                error_log("Failed to save signature image for: " . $signatureId);
            }
        }
    } else {
        echo "No signatures found to save.\n";
    }

    echo json_encode(['status' => 'success', 'message' => 'Signatures processed successfully.']);

} else {
    http_response_code(405); // Method Not Allowed
    echo json_encode(['status' => 'error', 'message' => 'Only POST requests are allowed.']);
}

?>