```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>📸インスタ加工アプリ🎉</title>
  <style>
    @keyframes pop {
      0% { transform: scale(1); opacity: 1; }
      50% { transform: scale(1.5); opacity: 0.7; }
      100% { transform: scale(1); opacity: 1; }
    }
    @keyframes sparkle {
      0% { opacity: 0; }
      50% { opacity: 1; }
      100% { opacity: 0; }
    }
    @keyframes wiggle {
      0%, 100% { transform: rotate(0deg); }
      25% { transform: rotate(5deg); }
      75% { transform: rotate(-5deg); }
    }
    .pop-animation {
      animation: pop 0.5s;
    }
    .sparkle-animation {
      animation: sparkle 1s infinite;
    }
    .wiggle-animation {
      animation: wiggle 1s infinite;
    }
  </style>
</head>
<body>
  <div style="width:400px; height:400px; border:2px dashed #ff69b4; border-radius:10px; position:relative; overflow:hidden; background-color:#fff0f5; font-family: Arial, sans-serif;">
    <canvas id="canvas" width="400" height="400" style="width:100%; height:100%; background-color:#ffe4e1;"></canvas>
    <div id="emoji-container" style="position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;"></div>
    <input type="file" accept="image/*" id="upload" style="position:absolute; bottom:10px; left:50%; transform:translateX(-50%); padding:10px; border: none; background-color:#ff69b4; color:white; border-radius:5px; cursor: pointer;">
    <div style="position:absolute; bottom:60px; left:50%; transform:translateX(-50%);">
      <button onclick="addEmoji('😄')" style="font-size:24px; margin:2px; background:transparent; border:none; cursor:pointer;">😄</button>
      <button onclick="addEmoji('🎉')" style="font-size:24px; margin:2px; background:transparent; border:none; cursor:pointer;">🎉</button>
      <button onclick="addEmoji('❤️')" style="font-size:24px; margin:2px; background:transparent; border:none; cursor:pointer;">❤️</button>
      <button onclick="addEmoji('✨')" style="font-size:24px; margin:2px; background:transparent; border:none; cursor:pointer;">✨</button>
    </div>
  </div>
  
  <script>
    const upload = document.getElementById('upload');
    const canvas = document.getElementById('canvas');
    const ctx = canvas.getContext('2d');
    const emojiContainer = document.getElementById('emoji-container');

    upload.addEventListener('change', (e) => {
      const file = e.target.files[0];
      if (!file) return;
      const reader = new FileReader();
      reader.onload = (evt) => {
        const img = new Image();
        img.onload = () => {
          ctx.clearRect(0, 0, canvas.width, canvas.height);
          let ratio = Math.min(canvas.width / img.width, canvas.height / img.height);
          let x = (canvas.width - img.width * ratio) / 2;
          let y = (canvas.height - img.height * ratio) / 2;
          ctx.drawImage(img, x, y, img.width * ratio, img.height * ratio);
        }
        img.src = evt.target.result;
      }
      reader.readAsDataURL(file);
    });

    function addEmoji(emoji) {
      const span = document.createElement('span');
      span.textContent = emoji;
      span.style.position = 'absolute';
      span.style.fontSize = '30px';
      span.style.cursor = 'pointer';
      span.style.left = Math.random() * 80 + '%';
      span.style.top = Math.random() * 80 + '%';
      span.classList.add('pop-animation');
      
      span.addEventListener('animationend', () => {
        span.classList.remove('pop-animation');
        span.classList.add('wiggle-animation');
      });

      span.onclick = () => {
        span.classList.remove('wiggle-animation');
        span.classList.add('sparkle-animation');
        setTimeout(() => {
          emojiContainer.removeChild(span);
        }, 1000);
      }

      emojiContainer.appendChild(span);
    }
  </script>
</body>
</html>
```