vue.js의 html2canvas 결정판
나는 연애편지 같은 것을 하고 싶다.
러브레터에서 php 측면에서 이미지를 생성하고 출력합니다.
참고 자료
https://love-letter.club/
https://wood-roots.com/web/vue-js/2253

특징

PHP 측면

○ 사용자 환경에 의존하지 않음
서버 무거워짐
X 드로잉 문자는 사용할 수 없음(라이브러리에 강제로 넣으면 사용할 수 있음...사용자 측 드로잉 문자 업데이트에 따라 변경됨)

JS 측면에서 생성

○ 서버 무부하
○ 그림 문자 사용 가능
사용자 환경에 따라 오류 발생
환경이 분산되어 있어서 디버깅이 매우 힘들다
다만, 앞으로의 시대는 js로 만들고 싶다.

설치

α버전 설치 지정

npm install [email protected]

주의사항

·CSS에서 body는 글꼴을 설정하지 않습니다.
・ 버전은 알파판을 사용합니다.
npm updateα버전이 아니라stable이기 때문에 다시 넣어야 합니다.
・ 큰 모니터로 출력하면 유선으로 들어갑니다(이미지 스며들기)
어쩔 수 없는 일이라 포기했어요.
hoge.vue

<style>


    #preview {
        overflow: auto;
        width: 100%;
    }

    #preview_inner {
        background-size: 600px auto;
        position: relative;
        width: 600px;
    }


    #letter_body {
        position: relative;

        border-left: 17px solid #fbbfc8;
        border-right: 17px solid #fbbfc8;

        display: inline-block;
        font-size: 1.5rem;
        color: #444;
        margin-top: -30px;
        padding: 10px 10px 10px 10px !important;
        min-width: 600px;
        text-align: center;

        height:200px;

        display: table-cell; /* IE8から使用可能 */
        vertical-align: middle;
        white-space: pre-wrap;
    }

</style>



<template>
    <div>


        <img v-if="imgData" :src="'/gcp-storage/' + imgData" style="width: 95%;">

        <el-input type="textarea" v-model="message" :rows=5></el-input>
        <el-button type="primary" @click="generate">画像を生成</el-button>


            <div id="preview" style="display: block;">
                <div id="preview_inner">
                    <div id="letter_top"><img src="/img/tegami-top.png"></div>
                    <div id="letter_body">--</div>
                    <div id="letter_bottom"><img src="/img/tegami-bottom.png"></div>
                </div>
            </div>


            <div id="text_body">{{ message }}</div>


            <h2>完成品</h2>

            <div id="result"></div>


    </div>
</template>

<script>

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

    export default {

        data() {
            return {
                imgData:'',
                message:'',
            };
        },
        created () {
            this.message = 'つけめんそばざるうどん恋をした夜はすべてがうまくいきそうで。';
        },
        watch: {

        },
        methods: {

            generate(){


                    //まずはテキスト部分だけ生成させる
                    let vc = this;

                    html2canvas(document.querySelector("#text_body"),{
                        scale: 2 //文字がぼやけないように
                    }).then(function(canvas){


                        //まずは一旦テキストを画像に
                        var letter_body = document.querySelector("#letter_body");
                        letter_body.innerHTML = '';
                        letter_body.appendChild(canvas);
                        vc.letterHeight = document.getElementById('letter_body').offsetHeight;

                        //その後、メイン画像として生成
                        html2canvas(document.querySelector("#preview_inner"),{
                            scale: 2
                        }).then(function(canvas){

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

                            // document.getElementById('preview').style.display = "none";
                            // document.getElementById('result').style.display = "none";


                            // 以下、サーバーに送る処理
                            // var dataURI = canvas.toDataURL('image/png');
                            // let dataform = new FormData();
                            // //
                            // const message_tmp = document.getElementsByName("message");
                            // dataform.append('id',vc.$route.params.id);
                            // dataform.append('body',message_tmp[0].value);
                            // dataform.append('img',dataURI);
                            //
                            // //サーバー側に画像を保存
                            // axios.post('/hoge/makeGcpOnly/', dataform).then(e => {
                            //
                            //     vc.imgData = e.data;
                            //     vc.dialogVisible = false;
                            //     vc.message = '';
                            //     vc.loading = false;
                            //
                            // }).catch((error) => {
                            //     console.log(error);
                            //     console.log("エラー");
                            // });

                        });


                    });

                }




        }
    };
</script>

이미지를 생성합니다.