昨日、WBC決勝戦の為、MLBJapanが休暇届を発信したことが、話題になっていました。
https://twitter.com/MLBJapan/status/1638099375657476096
名前欄が「＿＿＿＿（あなたの名前）様」となっていて、そのままでは使えないので、名前を埋め込むページを作ってみました。
ページは下記
https://aeha.github.io/dayoff4wbs/
Javascriptなので、ブラウザで動作します。
ソース (base.jpegは、MLBJapan公開の画像)
<!DOCTYPE html>
<html>
<head>
<title>WBC休暇届を生成</title>
</head>
<body>
<label for="text-input">テキスト:</label>
<input type="text" id="text-input" placeholder="お名前を入れて">
<button onclick="draw()">描画する</button><br>
<canvas id="canvas" width="1350" height="1080"></canvas>
<script>
// 画像のパス
var imagePath = "base.jpeg";
// 画像の読み込み
var image = new Image();
image.src = imagePath;
// canvas要素の取得
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
// 描画関数
function draw() {
// 画像を描画
context.drawImage(image, 0, 0);
// テキストを取得
var text = document.getElementById("text-input").value;
// 文字列を描画
context.font = "30px sans-serif";
context.fillStyle = "white";
context.fillText(text, 100, 640); // X座標: 100, Y座標: 100
// 画像と文字列を合成
var imageData = context.getImageData(0, 0, canvas.width, canvas.height);
context.putImageData(imageData, 0, 0);
}
</script>
</body>
</html>