如何等待html2canvas完成渲染保存后再关闭等待提示？

你的核心问题是异步代码的执行顺序没处理对：setTimeout、html2canvas、fetch都是异步任务，会在同步代码执行完后才运行，而你现在的hideSaveMessage()是同步执行的，所以提示框会立刻关闭，完全没等截图和上传完成。

以下是修改后的完整代码，附详细解释：

修改后的JavaScript代码 #

const saveButton = document.getElementById('saveButton');
saveButton.addEventListener('click', saveChanges); 

async function saveChanges() {  
    // 此处为保存数据到数据库的代码...
    console.log('Start image generating')
    showSaveMessage('Öffentliche Ansicht wird generiert...'); // 创建提示框

    try {
        // 等待setTimeout完成，确保页面元素渲染稳定
        await new Promise(resolve => setTimeout(resolve, 200));
        
        // 等待html2canvas生成截图
        const canvas = await html2canvas(document.getElementById('map'), {
            onclone: function(doc) {
                // 渲染前修改CSS的代码放在这里（注意你原代码多了一个多余的闭合})，需删除）
            },
            scale: 2,
            useCORS: true,
        });

        console.log('Starting to convert');
        const imgData = canvas.toDataURL('image/png');
        
        // 等待fetch上传并确认PHP处理完成
        const response = await fetch('sources/saveimage.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({ imageData: imgData })
        });

        if (!response.ok) {
            throw new Error('图片上传失败');
        }

        console.log('Conversion and save done');
    } catch (error) {
        console.error('处理出错:', error);
        // 可在这里添加错误提示逻辑，比如showErrorMessage('生成截图失败')
    } finally {
        // 不管成功还是失败，最后都关闭提示框
        hideSaveMessage();
    }
}

修改后的PHP代码（优化响应逻辑） #

原PHP代码处理完图片后没有返回响应，前端fetch会误以为请求已完成，但实际PHP可能还在处理大图片。修改后确保前端能准确感知处理完成：

<?php
$data = file_get_contents('php://input');
$imageData = json_decode($data, true)['imageData'];
$image = explode('base64,', $imageData); 

// 处理图片保存
$result = file_put_contents('images/glencore/rendered.png', base64_decode($image[1]));

// 返回处理结果给前端
if ($result !== false) {
    http_response_code(200);
    echo json_encode(['status' => 'success']);
} else {
    http_response_code(500);
    echo json_encode(['status' => 'error', 'message' => '图片保存失败']);
}
?>

关键修改点解释 #

1. 用async/await理顺异步流程：

   • 把saveChanges改成async函数，用await等待每个异步任务完成，逻辑和同步代码一致，新手更容易理解。
   • await new Promise(resolve => setTimeout(resolve, 200))：把setTimeout包装成Promise，确保等200毫秒后再执行下一步，避免元素渲染丢失。
   • await html2canvas(...)：等待截图生成完成后再拿到canvas对象。
   • await fetch(...)：等待图片上传请求完成，且确认PHP处理完图片（因为PHP现在会返回明确响应）。

2. 完善错误处理：

   • 用try/catch包裹所有异步操作，一旦截图或上传出错，会进入catch块处理，避免页面卡住。
   • finally块确保无论成功失败，提示框都会关闭，不会一直停留在页面上。

3. 修复原代码语法错误：

   • 你原代码中onclone函数内部多了一个多余的})，会导致语法报错，需要删除。

4. PHP端响应优化：

   • 原PHP无响应返回，前端会提前认为操作完成。修改后PHP处理完图片才返回状态，前端await fetch会等到此时才继续，确保真正完成所有操作后再关闭提示框。

内容的提问来源于stack exchange，提问作者Paul Folkers