如何用Google Drive API v3将HTML2Canvas生成图片通过JS+PHP上传至Google Drive

我们选用PHP后端上传方案，不需要暴露API凭证，更适合上传到你个人Google Drive的场景，步骤如下：

步骤1：准备服务账号与目标文件夹配置 #

• 打开你之前启用了Drive API的Google Cloud项目，进入「凭证」页面，创建新的服务账号
• 为服务账号生成JSON格式的密钥文件，保存到你网站的安全目录下（不要放到可公开访问的目录，避免泄露）
• 记录服务账号的邮箱地址，打开你的个人Google Drive，新建专门存储上传图片的文件夹
• 右键该文件夹选择「共享」，将服务账号邮箱添加为协作者，权限设为「编辑者」，保存设置
• 记录该文件夹的ID：在浏览器打开文件夹时，地址栏中folders/后面的字符串即为文件夹ID

步骤2：安装Google官方PHP客户端 #

使用Composer安装Drive API依赖，在你的站点根目录执行命令：

composer require google/apiclient:^2.0

如果没有安装Composer，可以直接下载官方预打包的客户端包放到项目目录中。

步骤3：修改savePNG.php代码，添加上传到Google Drive的逻辑 #

修改后的完整代码如下，对应替换你自己的密钥文件路径和目标文件夹ID即可：

<?php
// 引入Composer自动加载文件，路径根据你自己的项目结构调整
require __DIR__ . '/vendor/autoload.php';

$img = $_POST['img'];
$unm = $_POST['unm'];

if (strpos($img, 'data:image/png;base64') === 0) {
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $path = "images/userCards/{$unm}/";
    if (!is_dir($path)) {
        mkdir($path);
    }
    $fileName = date('Ymdhis') . $unm . '.png';
    $file = $path . $fileName;

    if (file_put_contents($file, $data)) {
        // 本地保存成功后，开始上传到Google Drive
        // 初始化Google客户端
        $client = new Google\Client();
        // 替换为你自己的服务账号密钥文件路径
        $client->setAuthConfig('path/to/your/service-account-key.json');
        $client->addScope('https://www.googleapis.com/auth/drive.file');
        
        $driveService = new Google\Service\Drive($client);
        
        // 配置上传文件的元信息
        $fileMetadata = new Google\Service\Drive\DriveFile([
            'name' => $fileName,
            // 替换为你自己的Google Drive目标文件夹ID
            'parents' => ['替换为你的目标文件夹ID']
        ]);
        
        // 读取本地文件内容上传
        $content = file_get_contents($file);
        $uploadedFile = $driveService->files->create($fileMetadata, [
            'data' => $content,
            'mimeType' => 'image/png',
            'uploadType' => 'multipart'
        ]);
        
        if ($uploadedFile->id) {
            echo "CARD SAVED AND UPLOADED TO GOOGLE DRIVE!";
        } else {
            echo "CARD SAVED TO LOCAL BUT UPLOAD TO GOOGLE DRIVE FAILED!";
        }
    } else {
        echo 'CARD NOT SAVED!';
    }
}
?>

常见问题排查 #

• 如果上传失败，先检查服务账号是否已经被添加为目标文件夹的编辑者
• 确认密钥文件路径配置正确，且PHP进程有读取密钥文件的权限
• 确认Drive API已经在Google Cloud控制台中启用

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