如何将Data URI转换为Buffer（二进制字符串）？React转PHP技术问询

嘿，我来帮你搞定这个需求！你已经通过React的mycanvas.toDataURL()拿到了图片的Data URI，现在要把它传给PHP，转换成Tinify API需要的二进制Buffer对吧？其实整个流程分前端处理和后端解码两步就搞定了，下面给你详细拆解：

前端：提取Data URI中的Base64内容并发送给PHP #

首先，Data URI的格式是data:[<mediatype>];base64,<data>，我们需要把后面的Base64编码部分提取出来，再发送到你的PHP接口。这里用fetch举个例子：

// 假设你已经从canvas拿到了dataURI
const canvasDataURI = mycanvas.toDataURL();
// 分割字符串，取出base64编码部分
const base64Image = canvasDataURI.split(',')[1];

// 发送到PHP接口
fetch('/path/to/your-script.php', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ image: base64Image })
})
.then(res => res.json())
.then(result => {
  console.log('图片优化完成:', result);
  // 这里可以处理返回的优化后数据，比如显示图片或者保存
})
.catch(err => console.error('请求出错:', err));

如果你习惯用axios，写法也类似，核心就是提取Base64部分再发送。

后端：PHP解码Base64为二进制Buffer并调用Tinify API #

PHP这边收到Base64字符串后，只需要用base64_decode()把它转换成二进制数据（也就是Tinify需要的Buffer），然后就可以直接用fromBuffer()方法了：

<?php
// 记得先初始化Tinify的API密钥
\Tinify\setKey("你的Tinify API密钥");

// 获取前端发送的JSON数据
$requestData = json_decode(file_get_contents('php://input'), true);
$base64Image = $requestData['image'];

// 解码Base64为二进制字符串（即Buffer）
$sourceBuffer = base64_decode($base64Image);

// 调用Tinify API优化图片
try {
  $optimizedBuffer = \Tinify\fromBuffer($sourceBuffer)->toBuffer();
  
  // 这里可以选择：把优化后的二进制数据存为文件
  file_put_contents('optimized_image.png', $optimizedBuffer);
  
  // 或者返回给前端（比如转成Data URI）
  $optimizedDataURI = 'data:image/png;base64,' . base64_encode($optimizedBuffer);
  echo json_encode(['success' => true, 'optimizedImage' => $optimizedDataURI]);
} catch(\Tinify\Exception $e) {
  // 处理API调用错误
  echo json_encode(['success' => false, 'error' => $e->getMessage()]);
}
?>

额外小提示 #

• 如果前端想用FormData来发送（比如同时传其他参数），后端可以直接用$_POST['image']获取Base64字符串，解码逻辑是一样的。
• 确保你的PHP配置里post_max_size和upload_max_filesize足够大，避免大图片传输时出错。
• Tinify API有调用次数限制，记得在代码里做好错误捕获，避免因为配额用完导致服务异常。

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