html

<!-- 画像URLは直接的に表示せず、うまいこと迂回する(完全に隠蔽するのは無理なため)-->
<canvas id="myCanvas"></canvas>

js

const canvas = document.getElementById("myCanvas");
const ctx = canvas.getContext("2d");
const imageUrl = "/assets/images/1.jpg"; // ここを適切なURLに変更

const fetchAndConvertImage = async function () {
  try {
    const response = await fetch(imageUrl);
    const blob = await response.blob(); //HTTPレスポンスから取得した画像データがblobという形式で取得できる
    const base64Image = await convertBlobToBase64(blob); // blob形式の画像データをbase64形式に変換
    loadImage(base64Image);
  } catch (error) {
    console.error("画像の取得に失敗しました:", error);
  }
};

const convertBlobToBase64 = function (blob) {
  return new Promise(function (resolve, reject) {
    const reader = new FileReader();
    reader.onloadend = function () {
      resolve(reader.result);
    };
    reader.onerror = function (error) {
      reject(error);
    };
    reader.readAsDataURL(blob);
  });
};

const loadImage = function (base64Image) {
  const img = new Image();
  img.onload = function () {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage(img, 0, 0);

    // Watermark テキスト設定
    ctx.font = "bold 148px Arial";
    ctx.fillStyle = "white";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
    ctx.shadowOffsetX = 3;
    ctx.shadowOffsetY = 3;
    ctx.shadowBlur = 5;

    // 中央に配置
    const centerX = canvas.width / 2;
    const centerY = canvas.height / 2;
    ctx.fillText("WaterMark", centerX, centerY);
  };
  img.src = base64Image;
};

// 関数を実行
fetchAndConvertImage();