はじめに
アップロードした画像を事前に入力したテキストと合成し、その結果をダウンロードしたい場合、以下のようにするとよいです
ソースコード
以下のHTMLをコピーすると、入力したテキストがアップロードした画像の右下に合成されます
合成された画像はダウンロードすることも可能です
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>画像にテキストを追加して保存</title>
</head>
<body>
<h1>画像にテキストを追加して保存</h1>
<!-- 画像アップロード -->
<input type="file" id="imageUpload" accept="image/*"><br><br>
<!-- テキスト入力 -->
<label for="textInput">追加するテキスト:</label>
<input type="text" id="textInput" placeholder="テキストを入力してください"><br><br>
<!-- キャンバス -->
<canvas id="imageCanvas" style="border:1px solid black;"></canvas><br>
<!-- 保存ボタン -->
<button id="saveButton" disabled>画像として保存</button>
<script>
const canvas = document.getElementById('imageCanvas');
const ctx = canvas.getContext('2d');
const imageUpload = document.getElementById('imageUpload');
const textInput = document.getElementById('textInput');
const saveButton = document.getElementById('saveButton');
let uploadedImage = null;
// 画像がアップロードされたときの処理
imageUpload.addEventListener('change', function(event) {
const file = event.target.files[0];
const reader = new FileReader();
reader.onload = function(e) {
const img = new Image();
img.onload = function() {
// キャンバスのサイズを画像に合わせる
canvas.width = img.width;
canvas.height = img.height;
// 画像をキャンバスに描画
ctx.drawImage(img, 0, 0);
uploadedImage = img;
saveButton.disabled = false;
};
img.src = e.target.result;
};
if (file) {
reader.readAsDataURL(file);
}
});
// テキストをキャンバスに追加する関数
function addTextToCanvas() {
if (!uploadedImage) return;
// 再度画像を描画（テキスト追加前にクリアしてリセット）
ctx.drawImage(uploadedImage, 0, 0);
const text = textInput.value;
// テキストのスタイルを設定
ctx.font = '30px Arial';
ctx.fillStyle = 'white'; // テキストの色
ctx.textAlign = 'right'; // 右揃え
ctx.textBaseline = 'bottom'; // 下揃え
// テキストを画像の右下に描画
const x = canvas.width - 10; // 右から10px内側
const y = canvas.height - 10; // 下から10px上
ctx.fillText(text, x, y);
}
// テキストが入力されたら即時キャンバスに反映
textInput.addEventListener('input', addTextToCanvas);
// 保存ボタンを押したときの処理
saveButton.addEventListener('click', function() {
// テキストを追加してから保存
addTextToCanvas();
// キャンバスの内容を画像に変換してダウンロード
const link = document.createElement('a');
link.href = canvas.toDataURL('image/png');
link.download = 'image_with_text.png';
link.click();
});
</script>
</body>
</html>