tripolskypetr/watermark.html

## watermark.html
<!DOCTYPE html>
<html>
  <body>
    <button onclick="setup()">Watermark</button>
    <button onclick="begin()">Image</button>
    <script defer>
      const button = document.querySelector("button");

      chooseFile = () =>
        new Promise((res) => {
          const input = document.createElement("input");
          input.setAttribute("type", "file");
          input.style.display = "none";
          input.onchange = () => {
            isCanceled = false;
            const files = input.files;
            if (!files?.length) {
              return;
            }
            res(files[0]);
            input.value = "";
          };
          input.click();
        });

      const downloadBlank = (blob, name = "image.png") => {
        const a = document.createElement("a");
        a.href = URL.createObjectURL(blob);
        a.download = name;
        a.style.display = "none";
        a.target = "_blank";
        document.body.appendChild(a);
        a.click();
      };

      const doWaterMark = async (src, waterMarkSrc) => {
        const image = document.createElement("img");
        const waterMark = document.createElement("img");

        waterMark.crossOrigin = "anonymous";
        waterMark.src = waterMarkSrc;

        image.crossOrigin = "anonymous";
        image.src = src;

        return Promise.resolve()
          .then(() =>
            Promise.all([
              new Promise((res, rej) => {
                waterMark.addEventListener("load", () => res());
                waterMark.addEventListener("error", () => rej());
              }),
              new Promise((res, rej) => {
                image.addEventListener("load", () => res());
                image.addEventListener("error", () => rej());
              }),
            ])
          )
          .then(
            () =>
              new Promise((resolve, reject) => {
                const canvas = document.createElement("canvas");

                canvas.width = image.width;
                canvas.height = image.height;

                const ctx = canvas.getContext("2d");

                if (!ctx) {
                  reject("there's an error");
                  return;
                }

                ctx.translate(canvas.width / 2, canvas.height / 2);
                ctx.drawImage(image, -image.width / 2, -image.height / 2);

                const scale =
                  Math.min(
                    canvas.width / waterMark.naturalWidth,
                    canvas.height / waterMark.naturalHeight
                  ) * 0.3;
                const w = waterMark.naturalWidth * scale;
                const h = waterMark.naturalHeight * scale;

                ctx.drawImage(waterMark, -w / 2, -h / 2, w, h);

                canvas.toBlob((blob) => {
                  if (!blob) {
                    reject("there's an error");
                    return;
                  }
                  resolve(blob);
                });
              })
          );
      };

      let waterMark = null;
      let image = null;

      const setup = async () => {
        waterMark = await chooseFile();
      };

      const begin = async () => {
        const image = await chooseFile();
        const result = await doWaterMark(
          URL.createObjectURL(image),
          URL.createObjectURL(waterMark)
        );
        downloadBlank(result);
      };
    </script>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<body>
	<button onclick="setup()">Watermark</button>
	<button onclick="begin()">Image</button>
	<script defer>
	const button = document.querySelector("button");

	chooseFile = () =>
	new Promise((res) => {
	const input = document.createElement("input");
	input.setAttribute("type", "file");
	input.style.display = "none";
	input.onchange = () => {
	isCanceled = false;
	const files = input.files;
	if (!files?.length) {
	return;
	}
	res(files[0]);
	input.value = "";
	};
	input.click();
	});

	const downloadBlank = (blob, name = "image.png") => {
	const a = document.createElement("a");
	a.href = URL.createObjectURL(blob);
	a.download = name;
	a.style.display = "none";
	a.target = "_blank";
	document.body.appendChild(a);
	a.click();
	};

	const doWaterMark = async (src, waterMarkSrc) => {
	const image = document.createElement("img");
	const waterMark = document.createElement("img");

	waterMark.crossOrigin = "anonymous";
	waterMark.src = waterMarkSrc;

	image.crossOrigin = "anonymous";
	image.src = src;

	return Promise.resolve()
	.then(() =>
	Promise.all([
	new Promise((res, rej) => {
	waterMark.addEventListener("load", () => res());
	waterMark.addEventListener("error", () => rej());
	}),
	new Promise((res, rej) => {
	image.addEventListener("load", () => res());
	image.addEventListener("error", () => rej());
	}),
	])
	)
	.then(
	() =>
	new Promise((resolve, reject) => {
	const canvas = document.createElement("canvas");

	canvas.width = image.width;
	canvas.height = image.height;

	const ctx = canvas.getContext("2d");

	if (!ctx) {
	reject("there's an error");
	return;
	}

	ctx.translate(canvas.width / 2, canvas.height / 2);
	ctx.drawImage(image, -image.width / 2, -image.height / 2);

	const scale =
	Math.min(
	canvas.width / waterMark.naturalWidth,
	canvas.height / waterMark.naturalHeight
	) * 0.3;
	const w = waterMark.naturalWidth * scale;
	const h = waterMark.naturalHeight * scale;

	ctx.drawImage(waterMark, -w / 2, -h / 2, w, h);

	canvas.toBlob((blob) => {
	if (!blob) {
	reject("there's an error");
	return;
	}
	resolve(blob);
	});
	})
	);
	};

	let waterMark = null;
	let image = null;

	const setup = async () => {
	waterMark = await chooseFile();
	};

	const begin = async () => {
	const image = await chooseFile();
	const result = await doWaterMark(
	URL.createObjectURL(image),
	URL.createObjectURL(waterMark)
	);
	downloadBlank(result);
	};
	</script>
	</body>
	</html>