jianke-yeshu-generator
/
index.html

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>椰树生成器</title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
    <style>
        html, body {
            width: 100%;
            max-width: 800px;
            margin: 0 auto;
            background-color: whitesmoke;
            font-family: Arial, sans-serif;
        }

        [v-cloak] {
            display: none;
        }

        #preview {
            background-color: #ffffff;
        }

        #yeshu {
            width: auto;
            height: 0;

            margin: 0 auto;
            background-color: #000;
            border: 2px solid #FEEF50;
            -webkit-box-sizing: border-box;
            -moz-box-sizing: border-box;
            box-sizing: border-box;
            padding: .2rem 0;

            font-weight: bold;
            text-align: center;
            line-height: 1;
        }

        #save {
            margin: 0 auto;
            display: block;
            vertical-align: bottom;
        }

        .yeshu-center {
            margin: 0 .4rem;
            background-color: #FEEF50;
            padding: .1rem;
        }

        .yeshu-title {
            color: #000;
            height: 5%;
            font-size: 1.1rem;
        }

        .yeshu-inner {
            background-color: #0021FC;
            border: .04rem solid #000000;
            color: #ffffff;
            padding: .04rem .04rem .4rem;
        }

        .yeshu-zhengzong {
            font-size: 1.1rem;
            vertical-align: baseline;
            margin: .1rem 0;
        }

        .yeshu-brand {
            border: .04rem solid #FEEF50;
            border-radius: 0.5rem;
            background-color: #FD0000;
            padding: .1rem;

            font-size: 3.6rem;
        }

        .yeshu-year {
            margin: .1rem 0;
            text-shadow: -.04rem -.04rem 0 #000,
            .04rem -.04rem 0 #000,
            -.04rem .04rem 0 #000,
            .04rem .04rem 0 #000;
            font-size: 3.3rem;
        }

        .yeshu-island {
            color: #FEEF50;
            font-size: 1.2rem;
        }

        .yeshu-fresh {
            border: .08rem solid #FD0000;
            border-radius: .1rem;
            background-color: #FEEF50;
            color: #FD0000;
            margin: .1rem -.1rem;
            padding: .1rem;

            font-size: 1.2rem;
        }

        .yeshu-xianzha {
            color: #FEEF50;
            font-size: 4rem;
            text-shadow: -.04rem -.04rem 0 #000,
            .04rem -.04rem 0 #000,
            -.04rem .04rem 0 #000,
            .04rem .04rem 0 #000;
        }

        .yeshu-no-addon {
            border: .06rem solid #FEEF50;
            border-radius: 0.3rem;
            background-color: #FD0000;
            padding: .1rem;
            margin: -.1rem .1rem;
            color: #ffffff;
        }

        .yeshu-no-addon > p {
            line-height: 1;
            margin: 0;
            font-size: 1.2rem;
        }

        .yeshu-no-addon > p:first-child {
            font-size: 1.5rem;
        }

        .button {
            -webkit-appearance: none;
            border: none;
            outline: none;

            background-color: #206DDC;
            color: #ffffff;
            font-size: 20px;
            text-align: center;
            line-height: 1;
            padding: 15px 0;
        }
    </style>
</head>
<body>
<img src="./yeshu.png" style="opacity: 0; width: 0; height: 0; position: absolute;">
<p style="opacity: 0; width: 0; height: 0; position: absolute;">生成椰树椰汁风格表情包</p>
<div id="app" v-cloak>
    <div id="preview">
        <div id="yeshu" :style="yeshuStyleObj" v-if="status != 'save'">
            <div class="yeshu-center">
                <div class="yeshu-title" contenteditable="true">
                    椰子特产在海南
                </div>
                <div class="yeshu-inner">
                    <div class="yeshu-zhengzong" contenteditable="true">
                        正宗
                    </div>
                    <div class="yeshu-brand" contenteditable="true">
                        椰树
                    </div>
                    <div class="yeshu-year" contenteditable="true">
                        29年
                    </div>
                    <div class="yeshu-island" contenteditable="true">
                        坚持在海南岛
                    </div>
                    <div class="yeshu-fresh" contenteditable="true">
                        用新鲜椰子肉
                    </div>
                    <div class="yeshu-xianzha" contenteditable="true">
                        鲜榨
                    </div>
                </div>
            </div>
            <div class="yeshu-no-addon">
                <p contenteditable="true">不用椰浆</p>
                <p contenteditable="true">不加香精当生榨</p>
            </div>
        </div>
        <img id="save" v-if="status == 'save'" :src="dataURL" :style="yeshuStyleObj">
    </div>
    <div :style="{ height: saveBtnHeight + 'px', 'font-size': 0 }" v-if="status != 'save'">
        <button class="button" type="button" @click="save" style="width: 70%">
            {{ status == 'edit' ? '保存编辑' : '正在生成图片…' }}
        </button>
        <button class="button" type="button" @click="source" style="width: 30%; background-color: #0021FC">
            查看源码
        </button>
    </div>
    <div :style="{ height: saveBtnHeight + 'px', 'font-size': 0 }" v-if="status == 'save'">
        <button class="button" type="button" style="width: 70%">
            长按/右键图片保存
        </button>
        <button class="button" type="button" @click="back" style="width: 30%; background-color: #0021FC">
            返回修改
        </button>
    </div>
</div>
<script src="//cdn.bootcss.com/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
<script src="//cdn.bootcss.com/vue/2.1.10/vue.min.js"></script>
<script>
    var vm = new Vue({
        el: '#app',
        data: {
            yeshuStyleObj: {
                width: 'auto',
                height: 0
            },
            saveBtnHeight: 50,

            status: 'edit',
            dataURL: ''
        },
        mounted: function () {
            var h = window.innerHeight || document.documentElement.clientHeight;
            var previewHeight = h - this.saveBtnHeight;
            this.yeshuStyleObj.height = previewHeight + 'px';
            this.yeshuStyleObj.width = (previewHeight / 2.1) + 'px';

            document.documentElement.style.fontSize = (previewHeight / 21) + 'px';
        },
        methods: {
            back: function () {
                this.status = 'edit';
            },
            source: function () {
                location.href = 'https://gitee.com/jianke/yeshu-generator/pages'
            },
            save: function () {
                var self = this;
                this.status = 'wait';

                var yeshu = document.getElementById('yeshu');

                html2canvas(yeshu, {
                    onrendered: function (canvas) {
                        self.dataURL = canvas.toDataURL('image/png');
                        self.status = 'save';
                    }
                })
            }
        }
    })
</script>
</body>
</html>