在 Laravel 中将 HTMLCanvasElement 存储为 JPG答案

【问题标题】：Storing an HTMLCanvasElement as a JPG in Laravel在 Laravel 中将 HTMLCanvasElement 存储为 JPG
【发布时间】：2018-05-13 18:49:51
【问题描述】：

我在我的 Vue 组件中集成了一个可返回图像或 HTMLCanvasElement 的裁剪脚本。然后在我的组件的裁剪方法中，我对我的上传函数进行 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 或 Image 保存为 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 字节的文件保存在无法访问的 storage/public 文件夹中。

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

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

谢谢。

【问题讨论】：

标签： laravel vue.js laravel-5.5 laravel-5.6 intervention

【解决方案1】：

实际上正如这里的文档中提到的那样：https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL
toDataURL 方法返回一个 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);
}

【讨论】：