使用打字稿向图像添加文本答案

【问题标题】：Add text to image using typescript使用打字稿向图像添加文本
【发布时间】：2017-03-19 14:00:31
【问题描述】：

您好，我是 typescript 的新手，我想将文本添加到图像中，并且该图像可以与文本一起下载。

我知道怎么用 javascript 来做

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Image Text</title>
</head>

<body>
<canvas id="myCanvas" width="578" height="400"></canvas>
<script>
  var canvas = document.getElementById('myCanvas');
  var context = canvas.getContext('2d');
  var imageObj = new Image();
  imageObj.onload = function() {
    context.drawImage(imageObj, 69, 50);
    context.font = "20px Calibri";
 context.fillText("My TEXT!", 100, 200);
  };
  imageObj.src = 
 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';
</script>
</body>``
</html>

谁能帮我解决这个问题？

谢谢。

【问题讨论】：

标签： angular typescript ionic2

【解决方案1】：

您的 javascript 代码几乎是有效的 typescript 代码，您只需告诉编译器 canvas 的类型为 HTMLCanvasElement：

var canvas = document.getElementById('myCanvas') as HTMLCanvasElement;
var context = canvas.getContext('2d');
var imageObj = new Image();
imageObj.onload = function () {
    context.drawImage(imageObj, 69, 50);
    context.font = "20px Calibri";
    context.fillText("My TEXT!", 100, 200);
};

imageObj.src = 'http://www.html5canvastutorials.com/demos/assets/darth-vader.jpg';

(code in playground)

【讨论】：