在 Laravel 中将 HTMLCanvasElement 存储为 JPG

Question

我在我的 Vue 组件中集成了一个裁剪脚本，returns 图像或 HTMLCanvasElement。在我的组件的 crop 方法中，我对我的上传函数进行了 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);
}

这会在无法访问的 storage/public 文件夹中保存一个 26 字节的文件。

有人可以帮忙解决这个问题吗？

我只想将 HTMLCanvasElement 保存为我的 storage/public 文件夹中的 JPG 文件。

谢谢。

Answer 1

实际上正如此处文档中所述：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
toDataURL 方法 returns 返回一个 base64 编码的数据，所以你必须在服务器端解码它
你可以像这样在 laravel 中使用 base64_decode 方法

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);
}

在 Laravel 中将 HTMLCanvasElement 存储为 JPG

Storing an HTMLCanvasElement as a JPG in Laravel

laravel

vue.js

intervention

laravel-5.5

laravel-5.6