webカメラ　CanvasからFileオブジェクトに変換し、サーバーに保存する方法

前提・実現したいこと

PHP(laravel)とJqueryを用いて、
パソコンのウェブカメラから写真を撮り、Canvasへと反映し<img>タグで表示し、それを保存するようなシステムを作っています。
<img>タグに表示する部分までは出来ていると思います。
機能を実装中に以下の問題が発生しました。
どこをどう変えれば治るのか教えていただきたいです。

発生している問題

JqueryでFileオブジェクトを生成したときには、"image/png"の拡張子であることが分かっています。
PHPで画像をstorage以下に保存しようとしても拡張子がpngであることも同様に確認したのですが、保存された画像ファイルを開いてみると「このファイルはサポートされていない形式です」と出てしまいます。

該当のソースコード

jquery
1    setPhoto.click(function (evnt) {
2        var photo = $('#photo');
3        var file_data = photo.attr('src'); 
4        file_data = file_data.replace('data:image/png;base64,', '');
5        // (2)バイナリデータに変換する
6        let buffer = new Uint8Array(file_data.length);
7        for (let i = 0; i < file_data.length; i++) {
8            buffer[i] = file_data.charCodeAt(i);
9        }
10        // (3)Fileオブジェクトを生成
11        let file = new File([buffer.buffer], "20210527.png", {type: "image/png"});
12        url = $(this).data('url');
13        url_render = $(this).data('urlrender');
14        id_form = $(this).data('id_form');
15        input_receipt = $(this).data('idreceipt')+':hidden';
16        evnt.preventDefault();
17        // 生成したファイルを送信
18        sendFile(file);
19    });
20
21    sendFile = function (file) {
22        form = document.getElementById(id_form);
23        var formData = new FormData(form);
24        formData.set('image', file);
25        $.ajax({
26            type: "POST",
27            url: url,
28            data: formData,
29            async: false,
30            contentType: false, 
31            processData: false, 
32            success: function (response)
33            {
34                if(response.status == 1){
35                    array_image.push(response.id);
36                    st_input_receipt = array_image.toString();
37                    $(input_receipt).val(st_input_receipt);
38                } else {
39                    console.log("error");
40                }
41            }
42        });
43    };

php
1 public function uploadImageAjax(Request $request, $product_id = 0)
2    {
3        $image_id = 0;
4        try{
5            $data = $request->all();
6            if(empty($data['image']) && empty($data['image_cam'])) {
7                return response()->json(['status' => 0]);
8            }
9            
10            if($request->hasFile['image_cam']){
11                $data['image'] = $data['image_cam'];
12            }
13            
14            
15            $extension = $data['image']->getClientOriginalExtension();
16            $image_name = $this->uploadImage($product_id, $data['image'], $extension);
17            
18            if($image_name)
19            {
20                $image_create = ImageControl::create([
21                    'token' => '',
22                    'name' =>  $image_name,
23                ]);
24                $image_id = $image_create->id;
25            }
26            
27            return response()->json(['status' => 1, 'id' => $image_id]);
28        }catch (Exception $e){
29            return response()->json(['status' => 0, 'id' => $image_id]);
30        }
31    }