如何将刚刚上传的图像发送到php而不存储它？

Question

我将直接在用例中介绍我的问题：我正在开发一种配置器，我有一个网页（我们称之为 page1），用户可以在其中上传图像。图像通常显示在img标签中。当用户上传图像后，他可以进入下一页（我们称之为 page2）。现在，在这个 page2 我想显示用户上传的图像而不存储图像。这是我迄今为止尝试过的：

在执行此操作之前，我已直接在 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

您可以保存所选文件（例如在 awindow var或 中local storage）并使用canvas在下一页中渲染图像。请参阅以下示例：function saveImage(img) {&nbsp; &nbsp; window.file = img.files[0];}function loadImage() {&nbsp; &nbsp; let ctx = document.getElementById('canvas').getContext('2d');&nbsp; &nbsp; let url = URL.createObjectURL(window.file);&nbsp; &nbsp; let img = new Image();&nbsp; &nbsp; img.onload = function() {&nbsp; &nbsp; &nbsp; &nbsp; ctx.drawImage(img, 20, 20);&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; }&nbsp; &nbsp; img.src = url;}<input type="file" id="imgFile" onchange="saveImage(this);" /><button onclick="loadImage()">Load image</button><canvas width="400" height="300" id="canvas"/>你应该放在saveImage第一页和loadImage第二页。我希望很清楚。再见。

Answer 2

您不需要从 base64 解码图像，只需执行以下操作：echo&nbsp;'<a&nbsp;class="cart-image"&nbsp;href="#"><img&nbsp;src="data:'.$img.'"&nbsp;alt="logo"></a>'?>$imgbase64 格式的图像在哪里。