Как конвертировать base64 в изображение (canvas) и сохранить его в путь к папке с помощью php?

Question

Я запутался, как загрузить этот base64 в путь к папке. Вот мой код:

var img = document.createElement('img') || document.querySelector('img');
var context;
var width = video.offsetWidth
        , height = video.offsetHeight;

canvas = canvas || document.createElement('canvas');
canvas.width = width;
canvas.height = height;

context = canvas.getContext('2d');
context.drawImage(video, 0, 0, width, height);

img.src = canvas.toDataURL('image/png');
document.body.appendChild(img);

Answer 1

Все, что вам нужно сделать, это передать данные изображения в файл PHP, чтобы сохранить эти данные в изображение, расшифровав его с помощью этой функции base64_decode($data);, $data - это данные вашего изображения.

Вы можетеПередайте эти данные, сохранив их в скрытом вводе в вашем HTML

Сначала сделайте скрытый ввод:

<form name="myForm" id="myForm" method="post" action="">
   <input name="hidden_data" id='hidden_data' type="hidden"/>
</form>`

Затем сохраните в нем данные изображенияjs код

document.getElementById('hidden_data').value = canvas.toDataURL('image/png');

Здесь вы можете передать эти данные в PHP, отправив данные формы

var form = document.getElementById("myForm");
form.submit();

В PHP вы можете сохранить файл, расшифровав данные base64 изображениясначала:

if(isset($_POST['hidden_data']){
    $img = $_POST['hidden_data'];

    //Extracting the base64 data from the passed string
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);

    //Decoding the image data 
    $data = base64_decode($img);

    //Choosing file name based on current time (unique name)
    $fileName = mktime() . ".png";

    $upload_dir = "./MyImages";
    $file = $upload_dir . $fileName;

    $success = file_put_contents($file, $data);
    if($success){
      echo "Image Saved";
    }else{
      echo "Couldn't Save Image";
    }
}

Вы можете выбрать другой способ передачи данных, например, запрос AJAX GET или что-то в этом роде, но у вас есть идея.

Answer 2

В моем коде я использовал это, и это сработало:

$picture = rtrim(strtr(base64_encode($_FILES['userfile']['name']), '+/', '-_'), '=');

Для просмотра:

img src=" echo base_url(). 'admin/assets/uploads/product/'.$product['userfile'];" alt="img" class = "img-thumbnail rounded float-left image-product"