Загрузить изображение с Canvas на сервер?

Question

[Богдан]

Здравствуйте. Подскажите пожалуйста, как передать изображения с canvas на server. Интересует именно момент, как получить файл для отправки? Спасибо.

Answer 1

[Дмитрий]

var canvas = document.getElementById('myCanvas');
var dataURL = canvas.toDataURL();
$.ajax({
  type: "POST",
  url: "script.php",
  data: { 
     imgBase64: dataURL
  }
});

и код PHP

$img = $_POST['imgBase64'];
$img = str_replace('data:image/png;base64,', '', $img);
$img = str_replace(' ', '+', $img);
$fileData = base64_decode($img);
$fileName = 'photo.png';
file_put_contents($fileName, $fileData);

PS вас в гугле забанили?)

Comments

[Богдан]

Спасибо, не забанили, но как бы вопрос как сделать на клиенте и передать готовый файл, что бы поменьше телодвижений было на сервере

[Дмитрий]

Богдан, клиентский JS не может оперировать файлами, поэтому создать реальный файл никак. А понятия "виртуальный файл" я не встречал. Про сервер - 2-3 дополнительных строчки - это разве много?)

[Богдан]

Дмитрий, ну почему не умеет, даже таки очень умеет

export const getBase64 = file => new Promise((resolve, reject) => {
  const reader = new FileReader();
  reader.onload = () => resolve(reader.result);
  reader.onerror = error => reject(error);
  reader.readAsDataURL(file);
});

async sendFile() {
      const b64Image = this.canvas.toDataURL('image/jpeg');
      const u8Image = b64ToUint8Array(b64Image);

      const formData = new FormData();
      formData.append('file', new Blob([u8Image], { type: 'image/jpg' }));
     const result = await http.post('/upload', formData);
    },

[Дмитрий]

Богдан, ок, отличный способ. но будьте аккуратнее с поддержкой браузеров https://caniuse.com/#search=blob , https://caniuse.com/#search=FileReader

[Богдан]

Дмитрий, Как бы все кроме опера мини, ну она скорей всего и с канвасом не работает адекватно ))))