アップロードした画像の上にテキストを追加して保存するアプリ。テキストは右下に配置。上下左右の余白を入力して設定。フォントサイズは20px。フォントカラーは#000000。

ここにテキストが入ります
以下がアプリのコードです。セキュリティ脆弱性の対策として、アップされた画像のサイズとファイル形式をチェックするコードを追加しました。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>画像にテキストを追加</title>
    <style>
      #image-preview {
        max-height: 400px;
      }

      #text-box {
        display: none;
        position: absolute;
        bottom: 20px;
        right: 20px;
        padding: 10px;
        background-color: rgba(255, 255, 255, 0.8);
        border: 1px solid #000000;
        border-radius: 5px;
        font-size: 20px;
        color: #000000;
      }
    </style>
  </head>
  <body>
    <form>
      <input type="file" id="image-upload" accept="image/*">
      <label for="margin-top">上の余白:</label>
      <input type="number" id="margin-top" value="0" min="0" max="100">
      <label for="margin-bottom">下の余白:</label>
      <input type="number" id="margin-bottom" value="0" min="0" max="100">
      <label for="margin-left">左の余白:</label>
      <input type="number" id="margin-left" value="0" min="0" max="100">
      <label for="margin-right">右の余白:</label>
      <input type="number" id="margin-right" value="0" min="0" max="100">
      <button type="button" onclick="addText()">画像にテキストを追加</button>
    </form>
    <div id="image-container">
      <img id="image-preview" src="" alt="画像のプレビュー">
      <div id="text-box">
        <span id="text">ここにテキストが入ります</span>
      </div>
    </div>

    <script>
      const imageUpload = document.getElementById("image-upload");
      const imagePreview = document.getElementById("image-preview");
      const marginTop = document.getElementById("margin-top");
      const marginBottom = document.getElementById("margin-bottom");
      const marginLeft = document.getElementById("margin-left");
      const marginRight = document.getElementById("margin-right");
      const textBox = document.getElementById("text-box");
      const text = document.getElementById("text");

      imageUpload.addEventListener("change", () => {
        const file = imageUpload.files[0];
        if (file.type !== "image/jpeg" && file.type !== "image/png") {
          alert("JPEGまたはPNG形式の画像をアップロードしてください。");
          imageUpload.value = "";
        } else if (file.size > 5000000) {
          alert("5MB以下の画像をアップロードしてください。");
          imageUpload.value = "";
        } else {
          const reader = new FileReader();
          reader.onload = () => {
            imagePreview.src = reader.result;
            textBox.style.display = "block";
          };
          reader.readAsDataURL(file);
        }
      });

      function addText() {
        const canvas = document.createElement("canvas");
        canvas.width = imagePreview.width;
        canvas.height = imagePreview.height;
        const ctx = canvas.getContext("2d");
        ctx.drawImage(imagePreview, 0, 0, canvas.width, canvas.height);

        const textWidth = ctx.measureText(text.textContent).width;
        const textHeight = parseInt(text.style.fontSize);
        const padding = textHeight / 2;
        const margin = {
          top: parseInt(marginTop.value),
          bottom: parseInt(marginBottom.value),
          left: parseInt(marginLeft.value),
          right: parseInt(marginRight.value),
        };

        ctx.fillStyle = "#ffffff";
        ctx.fillRect(
          canvas.width - textWidth - margin.right - padding,
          canvas.height - textHeight - margin.bottom - padding,
          textWidth + 2 * padding,
          textHeight + 2 * padding
        );

        ctx.fillStyle = "#000000";
        ctx.fillText(
          text.textContent,
          canvas.width - textWidth - margin.right,
          canvas.height - margin.bottom
        );

        const downloadLink = document.createElement("a");
        downloadLink.download = "image-with-text.png";
        downloadLink.href = canvas.toDataURL("image/png");
        downloadLink.click();
      }
    </script>
  </body>
</html>
```

ジョークとして、テキストとして追加される「ここにテキストが入ります」を独自のものに変更することができます。例えば、「ここにネコを入れてください。」とするなど。