javascript - 如何将表单的结果转换为图像-6ren

javascript - 如何将表单的结果转换为图像

转载作者：行者123 更新时间：2023-12-03 02:20:53

我正在尝试制作如图所示的应用程序。用户在表单中键入内容，右侧图像将填充键入的内容。完成后，单击“确定”，然后生成包含表单结果的图像。

我尝试用 Canvas 做，只是文本的线条有不同的样式、字体和大小。我发现 Canvas 非常有限，无法进行这种定制。

还有其他方法可以做到这一点吗？

这是我正在做的代码，但它并不完全正确。我正在尝试在 vue.js 中执行此操作

var app = new Vue({
    el: '#app',
    data: {
        titles: [
            { text: 'Title' },
            { text: 'Desc' },
            { text: 'Benef' }
        ],
        contents: [
            { text: 'I am title' },
            { text: 'I am desc' },
            { text: 'Create content here' }
        ]
    },
    directives: {
        insertMessage: function(canvasElement, binding) {
            var ctx = canvasElement.getContext("2d");
            ctx.clearRect(0, 0, 300, 150);
            ctx.fillStyle = "black";
            ctx.font = "20px Georgia";
            ctx.fillText(binding.value, 10, 50);
        }
    }
})

form { float: left;  margin: 20px 10px;  width: 30%;    }
input { display: block; margin-bottom: 10px  }

<body>
    <div id="app">
            <canvas width="500" height="500" style="border:1px solid #BBB;" v-insert-message="contents[0].text + contents[1].text + contents[2].text"></canvas>

            <form class="form-data">
                <fieldset>
                    <label for="" v-for="title in titles">{{title.text}}</label>
                    <input type="text" v-for="content in contents" v-model="content.text">
                </fieldset>
            </form>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.13/dist/vue.js"></script>
    <script src="main.js"></script>
</body>
</html>