vue.js で canvas 画像を サーバーに 保存

canvasで生成した画像をサーバーに保存したい。
例えば vue-chart.js などで生成した画像ね。

canvas タグ 0 個目のものを保存。
ゴミテキストを削除して送る

graph.vue

        methods: {


            // グラフを 画像にして保存
            saveCanvas(){
                var canvas = document.getElementsByTagName('canvas')[0].toDataURL();
                canvas = canvas.replace(/^data:image\/png;base64,/, '');

                let dataform = new FormData();

                dataform.append('canvas',canvas);
                dataform.append('fortuneresult_id',5);

                axios.post('/fortuneresult/upload/', dataform).then(e => {

                    console.log("成功");
                }).catch((error) => {
                    console.log("エラー");
                });

            },

サーバー側

fortuneresultController.php

    public function upload(Request $request)
    {

        // /var/www/html/uranaibako.com/public/tmp/example.png
        $filename = public_path().'/tmp/example.png';
        $fp = fopen($filename, 'w');
        fwrite($fp,base64_decode($request->canvas));
        fclose($fp);

        Log::debug(public_path().'/tmp/example.png');

    }

これで保存される。
あとは、好きにしてっ♪