如何将刚刚上传的图像发送到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) {

    window.file = img.files[0];

}

function loadImage() {

    let ctx = document.getElementById('canvas').getContext('2d');

    let url = URL.createObjectURL(window.file);

    let img = new Image();

    img.onload = function() {

        ctx.drawImage(img, 20, 20);    

    }

    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 '<a class="cart-image" href="#"><img src="data:'.$img.'" alt="logo"></a>'?>

$imgbase64 格式的图像在哪里。