javascript - 如何在不存储的情况下将刚刚上传的图像发送到 php？

Question

您好，我将直接通过用例介绍我的问题:我正在开发一种配置器，并且我有一个网页(我们称之为 page1)，用户可以在其中上传图像。图片通常显示在 img 标签中。当用户上传图片后，他可以进入下一页(我们称之为第 2 页)。现在，在此页面2 上，我想显示用户上传的图片而不存储图片。到目前为止，这是我尝试过的:

在执行此操作之前，我在 json 中直接插入了图像的 src 属性。但是浏览器给了我 GET 请求太长或类似的错误。因此，我找到了使用 base64 转换图像的解决方案:

function getBase64Image(img) {
  var canvas = document.createElement("canvas");
  canvas.width = img.width;
  canvas.height = img.height;
  var ctx = canvas.getContext("2d");
  ctx.drawImage(img, 0, 0);
  var dataURL = canvas.toDataURL("image/png");
  return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
}
function sendSelectedProducts()
{
   var logo = document.getElementsByName('logo-container')[0];

   var base64 = getBase64Image(logo);
   console.log(base64);
   var json_string = '{"img": "' + base64 + '" }';
   console.log(json_string);

   window.location.replace('riepilogo.php?prodotti=' + json_string);

}

因此，我对这段代码所做的是发送一个带有 base64 转换图像的 Json。在 PHP 端，这是尝试将图像转换回的代码:

function base64ToImage($base64_string, $output_file) {
   $file = fopen($output_file, "wb");
   $data = explode(',', $base64_string);
   fwrite($file, base64_decode($base64_decode));
   fclose($file);
   return $output_file;
}
echo '<p>'.$img.'</p>';
echo '<a class="cart-image" href="#"><img src="'.base64ToImage($img, 'logo_file.jpg').'" alt="logo"></a>'?>

此代码不起作用，我正在寻找不在服务器上存储图像的解决方案。我该怎么办？

Answer 1

您不需要从 base64 解码图像，只需这样做:

echo '<a class="cart-image" href="#"><img src="data:'.$img.'" alt="logo"></a>'?>

其中 $img 是 base64 格式的图像。有关详细信息，请参阅:How to display Base64 images in HTML?