ChatGPTの力を借りながらどんな写真も少し卑猥にするツールを作った

かがくのちからってすげー

ポキオ Chat GPT This video was uploaded to

巷で噂のChat GPT

AIしか勝たん、そういう世の中になってきましたよね。せっかくなので、くだらないことに活用してみようと思います。

画像に対して、右上に「This video was uploaded to ...」っていうウォーターマーク入れる機能良いな。
— 意識が低いポキオ (@pokiiiwo) 2023年3月31日

話の発端はこれ。画像の右上に「This video was uploaded to ...」と書かれているとちょっと気になってしまう人って居ますよね？居ます。ただの文字列のくせに、ちょっと卑猥に思えてしまうので、すごい不思議。

ポキオ Chat GPT This video was uploaded to

というわけで、Chat GPTさんに任意の画像の上に文字を埋め込むやり方を聞いてみました。

こんな感じ

ちょっと手直しはしましたが、こんなコードをものの数十分で出力してくてました。

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Bootstrap Example</title>
  <!-- Bootstrap CSS -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
</head>

<body>
  <div class="container mt-5">
    <form>
      <div class="form-group">
        <label for="inputImage">画像を選択してください</label>
        <input type="file" class="form-control-file" id="inputImage" accept="image/*">
      </div>
    </form>

    <div class="card mt-3">
      <button id="download" class="btn btn-primary">画像を保存する</button>
    </div>

    <div class="card mt-3">
      <canvas class="card-img-top" id="outputCanvas"></canvas>
    </div>

  </div>

  <!-- jQuery -->
  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
  <!-- Popper.js -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
  <!-- Bootstrap JS -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>

  <script>
    const input = document.getElementById('inputImage');
    const canvas = document.getElementById('outputCanvas');
    const ctx = canvas.getContext('2d');
    const fontSize = 24;

    input.addEventListener('change', () => {
      const image = new Image();
      image.src = URL.createObjectURL(input.files[0]);
      image.onload = () => {
        var width = image.width;
        var height = image.height;
        if (width > 800) {
          height *= 800 / width;
          width = 800;
        }
        canvas.width = width;
        canvas.height = height;
        ctx.drawImage(image, 0, 0, width, height);

        ctx.font = "35px Arial";
        ctx.fillStyle = "grey";
        ctx.shadowColor = "black";
        ctx.shadowOffsetX = 3;
        ctx.shadowOffsetY = 3;
        ctx.shadowBlur = 1;
        ctx.fillText("This video was uploaded to", canvas.width - 400, 75);
      };
    });

    const downloadBtn = document.getElementById('download');
    downloadBtn.innerHTML = "画像を保存する";
    downloadBtn.addEventListener("click", function () {
      var imageData = canvas.toDataURL("image/png");
      var link = document.createElement('a');
      link.href = imageData;
      link.download = "image.png";
      link.click();
    });
  </script>
</body>

</html>