Хранение HTMLCanvasElement в виде JPG в Laravel

Question

Я встроил сценарий обрезки, который возвращает изображение или HTMLCanvasElement в мой компонент Vue.В методе кадрирования моего компонента я затем выполняю аксиальный пост-вызов функции загрузки.Вот метод обрезки:

crop() {
  var croppedCanvas = this.cropper.getCroppedCanvas()
  var img = croppedCanvas.toDataURL('image/jpeg', 1.0);
  var formData = new FormData();
  formData.append('image', img) // I can send croppedCanvas here too if I want
  axios.post('/api/upload', formData)
}

Теперь проблема.Я не могу сохранить HTMLCanvasElement или изображение в виде файла JPG.Я перепробовал так много разных подходов (toDataURL, toBlob и т. Д.) И потерпел неудачу в каждом из них.Моя последняя реализация была следующей:

public function upload(Request $request) {
    $input = $request->all();
    $img = $input['image'];
    Storage::put('picture.jpg', $img);

    return response(Response::HTTP_OK);
}

Это сохраняет 26-байтовый файл в папке хранения / публичной папки, который недоступен.

Может кто-нибудь, пожалуйста, помогите, как это сделать.

Я просто хочу сохранить HTMLCanvasElement в виде файла JPG в моей папке хранения / общедоступной папке.

Спасибо.

Answer 1

На самом деле, как указано в документации здесь: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
Метод toDataURL возвращает обратно закодированные в base64 данные, поэтому вы должны декодировать их на стороне сервера
Вы можете использовать метод base64_decode в laravel следующим образом

public function upload(Request $request) {
  $img = $request->image;
  $img = str_replace('data:image/jpeg;base64,', '', $img);
  $img = str_replace(' ', '+', $img);
  $data = base64_decode($img);
  Storage::put('picture.jpg', $data);
  return response(Response::HTTP_OK);
}