html2canvas vue.js element ui 画像を表示せず生成

html2canvasを使うと、
一旦表示してから画像を生成無いといけないのでバグる。

ということで、表示させずに生成する方法。
今回はポップアップを使う。

hoge.vue

<style type="text/css">

    #letter_body {
        position: relative;
        margin-bottom: -150px;
        border-left: 17px solid #55acee;
        border-right: 17px solid #55acee;
        line-height: 180% !important;
        display: inline-block;
        font-size: 1.3rem;
        font-weight: bold;
        color: #444;
        padding: 0px 10px -10px 10px !important;
        min-width: 600px !important;
        max-width: 600px !important;
        text-align: center;
        height:200px;
        display: table-cell; /* IE8から使用可能 */
        vertical-align: middle;
        white-space: pre-wrap;
    }

    #preview_inner {
        width: 600px;
    }

</style>
<template>

    <div>


        <el-button @click="openAnswerModal()">モーダルオープン</el-button>

        <el-dialog
                title=""
                :visible.sync="answerVisible"
                width="90%"
        >

            <div style="text-align: center;">
                <img v-if="questionImg" :src="questionImg" class="responsive" style="max-width: 600px;">
            </div>

            <span slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitAnswerForm('answerForm')">送信</el-button>
            </span>

        </el-dialog>






<!--        画面の一番下らへんい配置しておく。一旦隠しておいて-->
        <div id="ogp_question_make_box" style="margin-top: 500px;display: none;">
            <div id="preview">
                <div id="preview_inner">
                    <div id="letter_top"><img src="/img/qa-top.png"></div>
                    <div id="letter_body">{{ form.body }}</div>
                    <div id="letter_bottom"><img src="/img/qa-bottom.png"></div>
                </div>
            </div>
            <div id="result"></div>
        </div>


    </div>


</template>

<script>

    import html2canvas from 'html2canvas'//古いと、文字のサイズがずれるので、 vue.blade で 読みコンで使う

    export default {

        data () {
            return {
                questionImg: '',
                answerVisible:false,
                form: {
                    body:"ここに\n生成したい内容"
                }
            };
        },

        methods: {

            openAnswerModal(){
                this.answerVisible = true;
                this.form.body = "ここで生成\nされるがね！変わるんだがね！";
                this.generate();
            },

            generate(){

                //生成前に一旦表示して
                document.getElementById('ogp_question_make_box').style.display = "block";

                let vc = this;
                html2canvas(document.querySelector("#preview_inner")).then(function(canvas){

                    //また隠す
                    document.getElementById('ogp_question_make_box').style.display = "none";

                    var result = document.querySelector("#result");
                    result.innerHTML = '';
                    result.appendChild(canvas);

                    var dataURI = canvas.toDataURL('image/png');

                    // alert(dataURI);
                    vc.questionImg = dataURI;

                });

            },

        },




    }
</script>

こんな感じ。
画面の一番したに配置しておきゃ画面がちらつくこともない。