使用 Canvas 向图像添加文本

Question

我想创建一个小站点以便在图像上添加文本。 我添加了一个文本框和一个按钮来插入自定义文本，但它不起作用。 我究竟做错了什么？ 提前致谢

<script>

function = function1(){
 var canvas = document.getElementById("myCanvas");
 var context = canvas.getContext("2d");
 var imageObj = new Image();

 t = document.getElementById('text').value;

 if(t == '' || t == null) {
 word = "you forgot to put something";
  } else {
 word = t;
 }

 };

  imageObj.onload = function(){
     context.drawImage(imageObj, 10, 10);
     context.font = "40pt Calibri";
     context.fillText(word, 20, 20);
 };
 imageObj.src = "img/image.jpg"; 
 };


 </script>

 <body>
    <canvas id="myCanvas" width="578" height="400"></canvas>
 </body>

 <form>
    Text: <input id="textBox" placeholder="your text"/>
 <br>
     <input type='submit' id="submit" value="submit" onClick="function1()" >
 </form>

Answer 1

通过查看您的代码，您似乎正在尝试在加载图像之前绘制文本。

您必须先调用window.onload函数。

来自 MDN

load 事件在文档加载过程结束时触发。 至此，文档中的所有对象都在 DOM 中，所有图片、脚本、链接和子框架都加载完毕。

这是一个小例子。

 window.onload = function(){ var canvas = document.getElementById("myCanvas"); var context = canvas.getContext("2d"); var imageObj = new Image(); imageObj.onload = function(){ context.drawImage(imageObj, 10, 10); context.font = "40pt Calibri"; context.fillText("My TEXT!", 50, 50); }; imageObj.src = "http://cdn.playbuzz.com/cdn/503aeb8a-c1b8-4679-8ed3-da5e11643f29/8a940ebd-8630-4247-888e-c4c611f4f0e2.jpg"; };

 <canvas id="myCanvas"></canvas>

Answer 2

您的代码中有一些错误。

让我们先从 HTML 开始：

<body>
    <canvas id="myCanvas" width="578" height="400"></canvas>

    <form id="myForm">
        Text: <input id="myText" placeholder="your text"/>
        <br />
        <input type="submit" value="submit" />
    </form>
</body>

然后是Javascript：

<script>
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");
    var imageObj = new Image();

    imageObj.onload = function()
    {
        context.drawImage(imageObj, 0, 0);
    }  

    imageObj.src = "https://image.freepik.com/free-vector/abstract-background-in-geometric-style_1013-17.jpg"; 

    var myForm = document.getElementById('myForm');
    myForm.addEventListener('submit', function(e)
    {
        var text = document.getElementById('myText').value;

        if(text.lenght == 0)
        {
             alert("you forgot to put something");
        }

        context.font = "40pt Calibri";
        context.fillText(text, 50, 50);

        e.preventDefault();
    });

注意：您需要将脚本放在页面底部，就在</body>标记之前。

使用 Canvas 向图像添加文本

问题描述

2 个解决方案

解决方案1
2 2016-02-22 20:42:19

解决方案2
1 已采纳 2016-02-22 20:54:26

使用 Canvas 向图像添加文本

问题描述

2 个解决方案

解决方案1 2 2016-02-22 20:42:19

解决方案2 1 已采纳 2016-02-22 20:54:26

解决方案1
2 2016-02-22 20:42:19

解决方案2
1 已采纳 2016-02-22 20:54:26