Сохранение HTMLCanvasElement в виде JPG в Laravel

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

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 в моем хранилище/общедоступной папке.

Спасибо.


vue.js laravel intervention laravel-5.6 laravel-5.5
person Kopty    schedule 13.05.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

На самом деле, как указано в документах здесь: 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);
}
person Salamov    schedule 13.05.2018