vue.js konva でテキスト生成、保存

とりあえず、メモね。
メモリリーク修正版。
まぁ、コピペじゃ動かないので、参考にしてね。

<style>
    img {
        max-width: 100% !important;
        height: auto !important;
    }

</style>
<template>

    <div>

        <textarea v-model="text" placeholder="add multiple lines" style="width: 100%;min-height: 300px;"></textarea>
        <img v-show="gazou" v-bind:src="gazou"/>

        <el-button v-bind:disabled="$root.loading" v-touch="hozon" type="primary" icon="el-icon-edit"></el-button>



        <div id="container" style="display: none;">
            <canvas></canvas>
        </div>


    </div>


</template>

<script>

    var height = window.innerHeight;
    var useFont = 'Kosugi Maru';

    var stage = '';
    var layer = '';
    var complexText = '';
    var rect = '';

    var defWidth = 540;
    var defX = 30;




    function makeCanvas(text){

        if(!stage) {
            stage = new Konva.Stage({
                container,
                width: 600,
                height: height
            });

            layer = new Konva.Layer();

            complexText = new Konva.Text({
                x: defX,
                y:0,
                text:text,
                lineHeight:1.5,
                fontSize: 24,
                fontFamily: useFont,
                fill: '#000',
                width:defWidth,
                padding: 20,
                align: 'center'
            });

            rect = new Konva.Rect({
                x: defX,
                y: 0,
                stroke: '#fff',
                strokeWidth: 0,
                fill: '#fff',
                width:defWidth,
                height: complexText.height(),
                cornerRadius: 0
            });


            layer.add(rect);
            layer.add(complexText);
            stage.add(layer);

        } else {


            //現在、ステージのっている要素の値のみ変更する
            complexText.text(text);
            height = complexText.height()+50;
            rect.height(complexText.height());
            stage.height(height);

        }


        return stage;

    }

    export default {
        data() {
            return {
                text: '',
                gazou:false
            };
        },
        mounted() {
            var FontFaceObserver = require('fontfaceobserver');
            var font = new FontFaceObserver(useFont);
            font.load().then(function () {
                makeCanvas('');
            });
        },
        methods: {

            hozon() {
                this.$root.loading = true;

                let stage = makeCanvas(this.text);//これが味噌。canvasのサイズを取得でなくて、stageのデータをちゃんと取得すること。じゃないとスマホやPCでサイズがめっちゃくちゃになる。
                let dataform = new FormData();

                //undefinedならテキストで undefined のまま送信
                dataform.append('crypt_id',this.$root.user.crypt_id);
                dataform.append('img',stage.toDataURL());
                dataform.append('body',this.text);

                axios.post('/konva/add/', dataform).then(e => {
                    this.$root.loading = false;
                    this.gazou = '/gcp_storage/' + e.data;
                    console.log("画像をアップロードしました");
                }).catch((error) => {
                    console.log("画像アップロードエラー");
                });




            },
        }
    };

</script>