Question

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

我尝试使用画布，除了文本的行具有不同的样式，字体和大小。我看到画布非常有限，无法进行这种自定义。

我还有其他办法吗？

这是我正在做的代码，但它并不完全正确。我想在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>

Answer 1

如果您不想在画布中执行此操作，您可能会更好地将文本行提交到服务器并在服务器端一致地生成图像（例如在python中使用PIL或其他内容）。使用画布需要浏览器支持，字体支持，浏览器一致性等。

Answer 2

您可以轻松更改画布的字体大小/系列。

ctx.font="30px Arial";

这将更改用于Arial的字体，大小为30px。

如果您想使用自定义字体，则必须通过CSS或Javascript将其链接到文档中。

Answer 3

有一个名为html2canvas的库。它实际上正如名称所暗示的那样。 - 你传递一些HTML，它将返回一个看起来与HTML完全相同的画布。

您可以查看它的实时工作情况here。只需键入一些文本，然后单击按钮。将附加HTML的画布表示。告诉底部矩形是画布的最简单方法是尝试选择文本。

这是实时预览的来源：

<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"></script>

<p>Actual DOM:</p>
<div id="capture" style="padding: 10px; background: #f5da55">
  <h4 style="color: #000; ">Hello world!</h4>
  <input type="text"></input>
</div>
<button id="go">... to canvas!</button>
<p>Canvas:</p>

<script>
  document.getElementById("go").onclick = function() {
    html2canvas(document.querySelector("#capture")).then(canvas => {
      document.body.appendChild(canvas)
    });
  }
</script>

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

3 个答案: