写真に数字を貼り付けるアプリ
写真を選択してください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>写真に数字を貼り付けるアプリ</title>
<style>
#photo {
width: 500px;
}
.number {
display: none;
position: absolute;
font-size: 10pt;
}
</style>
</head>
<body>
<h1>写真に数字を貼り付けるアプリ</h1>
<p>写真を選択してください。</p>
<input type="file" accept="image/*" id="photoInput">
<div id="photoContainer">
<img src="#" alt="選択された写真" id="photo">
</div>
<script>
const photoInput = document.getElementById('photoInput');
const photo = document.getElementById('photo');
const photoContainer = document.getElementById('photoContainer');
photoInput.addEventListener('change', function(e) {
const file = e.target.files[0];
const reader = new FileReader();
reader.onload = function(event) {
photo.src = event.target.result;
};
reader.readAsDataURL(file);
});
let counter = 1;
photoContainer.addEventListener('click', function(e) {
const x = e.offsetX;
const y = e.offsetY;
const number = document.createElement('div');
number.textContent = counter++;
number.classList.add('number');
number.style.left = x + 'px';
number.style.top = y + 'px';
photoContainer.appendChild(number);
});
</script>
</body>
</html>