Question

我集成了一个裁剪脚本，可以在我的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字节文件。

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

我只是想将HTMLCanvasElement保存为我的存储/公共文件夹中的JPG文件。

感谢。

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

在Laravel中将HTMLCanvasElement存储为JPG

1 个答案: