canvasデータをlaravelへ送信しデコードする

こんにちは、いしがみです。
今回は、自分がlaravelをやっているときに嵌まってしまった、canvasデータの送信とlaravel側の受信について書きます。

環境

Laravel v9.17.0
PHP v8.1.7

Javascript側の送信

今回は、保存ボタンをクリックしたときにcanvasに描かれたデータを、base64にエンコードし、laravelへと送信する。laravel側で保存用のAPIを用意しておき、そちらに送信する。

main.js

saveButton.addEventListener('click', () => {
    //canvasデータを指定された画像フォーマット形式のdataURIを返す
    var canvasData = canvas.toDataURL("image/png");

    const fd = new FormData();//送信データ
    const xhr = new XMLHttpRequest();//リクエストの作成

    //送信先の指定
    xhr.open('post', '/api/upload');
    //データの追加
    fd.append('uploadfile',canvasData);
    //ファイル送信
    xhr.send(fd);
  
});

laravel側の受信

laravel側は、APIとして起動するため、api.phpにルートの記載をまずは行う。

api.php

Route::post('/upload',[App\Http\Controllers\DrawStoreController::class,'upload']);

その後、今回使用するControllerに画像を保存すプログラムを作成いたしました。base64として受け取ったデータを関数内部で、デコードし、pngデータとして保存しています。

ImageStore.php

     public function upload(Request $request)
        {
        // 画像保存
        $image = $request->input("uploadfile");  // your base64 encoded

        //base64をデコードする前の下準備
        $image = str_replace('data:image/png;base64,', '', $image);
        $image = str_replace(' ', '+', $image);  // 空白を'+'に変換

        //ファイル名の指定
        $imageName ='aaa'.'.'.'png';

        //デコードしたファイルをstorageに保存
        \File::put(storage_path(). '/' . $imageName, base64_decode($image));
    }

これらの送信及び受信により、画像データの受け渡しができました。