Question

嗨，我是打字稿的新手，我想为图像添加文字，可以用文字下载该图片。

我知道如何使用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>

任何人都可以帮助我吗？

感谢。

Answer 1

您的javascript代码几乎是有效的打字稿代码，您需要做的就是告诉编译器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）

使用typescript将文本添加到图像

1 个答案: