使用 Canvas 向图像添加文本答案

【问题标题】：Add a text to an image with Canvas使用 Canvas 向图像添加文本
【发布时间】：2016-02-22 20:38:05
【问题描述】：

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

<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>

【问题讨论】：

“它不起作用” 什么不起作用？
我看不到图片和文字...

标签： javascript html canvas text

【解决方案1】：

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

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

来自 MDN

加载事件在文档加载过程结束时触发。至此，文档中的所有对象都在 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"; 
};

&lt;canvas id="myCanvas"&gt;&lt;/canvas&gt;

【讨论】：

好的，我解决了这个问题，但它不起作用，但是如何通过文本框插入可变文本？

【解决方案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> 标记之前。

【讨论】：

非常感谢，现在可以完美运行了。我很抱歉我的错误，但我正在努力学习它！