javascript - Base64 图像到 imagecreatefromstring() 丢失数据

Question

我正在使用axios通过ajax发送base64字符串。使用下面的方法，当它从 Base64 数据编码回 jpg 时，我会以某种方式丢失大量数据。我怎样才能在不丢失数据的情况下发送此信息？

我从输入中抓取文件并将其发送到

var reader = new FileReader();
reader.readAsDataURL(file);

base64 字符串作为 ajax 发送，axios 为

axios.post('url', {main: img})

PHP 脚本接收帖子如下:

$incoming = json_decode(file_get_contents('php://input'))->main;
$mainImage = str_replace('data:image/jpeg;base64,', '', $incoming);
$img = imagecreatefromstring(base64_decode($mainImage));
$imageSave = imagejpeg($img, './uploaded.jpg');

例如，最近保存在服务器上的文件只有14k，但我上传到输入字段的原始文件是19k。我将客户端上传的 base64 输出到预览 div，并且该图像保存为 19k jpg，所以我假设它是 php 脚本。关于导致数据丢失的原因有什么想法吗？也许有一些axios config value ？

Answer 1

发生的情况是，前端正在发送 base64 编码的二进制图像数据。

当前，您正在解码图像、创建新图像并将其另存为 jpg。这只会再次压缩图像。

如果您只是解码数据并将其保存到文件(扩展名为 .jpg)，您将获得上传图像的精确副本。

incoming = json_decode(file_get_contents('php://input'))->main;
$mainImage = str_replace('data:image/jpeg;base64,', '', $incoming);
file_put_contents('./uploaded.jpg', base64_decode($mainImage));