上传图片添加自定义水印后再继续上传

最新推荐文章于 2024-08-20 21:49:24 发布

刘大爷_17

最新推荐文章于 2024-08-20 21:49:24 发布

阅读量429

点赞数 11

分类专栏：日常打怪兽记录文章标签： udp 网络协议网络

本文链接：https://blog.csdn.net/weixin_37365539/article/details/135931161

版权

日常打怪兽记录专栏收录该内容

5 篇文章 1 订阅

订阅专栏

场景：上传图片调用接口前，需要先在图片上加水印，再传给接口保存
参考链接：https://www.jb51.net/javascript/2853086w1.htm
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      img {
        width: 500px;
      }
    </style>
  </head>
  <body>
    <input type="file" id="fileUplodBox" />
    <img alt="原图" id="originPic" />
    <img alt="水印图" id="waterMark" />
  </body>
  <script>
    const imgLink =
      "https://img2.baidu.com/it/u=2048195462,703560066&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1684861200&t=a0c977f68632303e7dac2196e8ad2866";
    document.getElementById("originPic").setAttribute("src", imgLink);
    const fileUplodBox = document.getElementById("fileUplodBox");
    fileUplodBox.addEventListener("change", (e) => {
      const file = e.target.files[0];
      const filename = e.target.files[0].name;
      dealFile(file, filename);
    });
    test();
    async function test() {
      const img = await fillImgToImg(imgLink);
      document.getElementById("waterMark").setAttribute("src", img);
    }
    async function dealFile(file, filename) {
      const base64 = await fileToBase64Async(file);
      document.getElementById("originPic").setAttribute("src", base64);
      const newbase64 = await fillTextToImg(base64);
      document.getElementById("waterMark").setAttribute("src", newbase64);
      // 接下来声明要传给接口的数据formData
      let fileUrl = newbase64;
      fileUrl = fileUrl.replace(/\r|\n/g, '').replace('data:image/jgp', 'data:image/jpeg');
      let newFile = dataURLtoFile(fileUrl, filename);
      newFile.src = fileUrl;
      const formData = new FormData();
      formData.append("file", newFile);
      formData.append("name", filename);
    }
    function dataURLtoFile(dataurl, filename) {
        var arr = dataurl.split(',');
        var mime = arr[0].match(/:(.*?);/)[1];
        var bstr = atob(arr[1]);
        var n = bstr.length, u8arr = new Uint8Array(n);
        while (n--) {
          u8arr[n] = bstr.charCodeAt(n);
        }
        return new File([u8arr], filename, { type: mime });
      }
    // 获取上传图片的base64编码
    function fileToBase64Async(file) {
      return new Promise((resolve, reject) => {
        let reader = new FileReader();
        reader.readAsDataURL(file);
        reader.onload = (e) => {
          resolve(e.target.result);
        };
      });
    }
    // 给图片加文字水印
    function fillTextToImg(base64) {
      const img = new Image();
      img.src = base64;
      // 解决跨域问题
      img.setAttribute("crossOrigin", "Anonymous");
      return new Promise((resolve, reject) => {
        img.onload = () => {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          const remFontSize = 50;
          ctx.font = "bold "+remFontSize + "px Microsoft YaHei";
          ctx.textAlign = "left";
          ctx.fillStyle = "#d11e1e";
          const name1 = `名称-所属单位`;
          const name2 = `2024-1-18 14:14 定位`;
          // 实心文字
          ctx.fillText(name2, 30,
            canvas.height - 100)
          ctx.fillText(name1, 30,
          canvas.height - 170)
            // 如果想生成空心文字可以使用
          //   ctx.strokeText(
          //   name,
          //   canvas.width / 2,
          //   canvas.height - remFontSize - spaceH
          // );
          resolve(canvas.toDataURL("image/jpeg"));
        };
      });
    }
    // 通过图片获取base64
    async function getImgBase64(base64, width = 50) {
      const img = new Image();
      img.src = base64;
      img.setAttribute("crossOrigin", "Anonymous");
      return new Promise((resolve, reject) => {
        img.onload = () => {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = width;
          canvas.height = (img.height * width) / img.width;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          resolve(canvas.toDataURL("image/jpeg"));
        };
      });
    }
    // 给图片加图片水印
    function fillImgToImg(base64, waterMark = imgLink) {
      waterMark =
        "https://img2.baidu.com/it/u=2243573419,589412055&fm=253&app=138&size=w931&n=0&f=JPEG&fmt=auto?sec=1684861200&t=7bf0a17ca21ae8ec8aa77b0f98cb4c7e";
      const img = new Image();
      img.src = base64;
      img.setAttribute("crossOrigin", "Anonymous");
      return new Promise((resolve, reject) => {
        img.onload = async () => {
          const canvas = document.createElement("canvas");
          const ctx = canvas.getContext("2d");
          canvas.width = img.width;
          canvas.height = img.height;
          ctx.fillRect(0, 0, canvas.width, canvas.height);
          ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
          const waterMarkSrc = await getImgBase64(waterMark, 100);
          const waterMarkImg = new Image();
          waterMarkImg.src = waterMarkSrc;
          waterMarkImg.setAttribute("crossOrigin", "Anonymous");
          waterMarkImg.onload = () => {
            ctx.drawImage(
              waterMarkImg,
              canvas.width / 2 - waterMarkImg.width / 2,
              canvas.height - waterMarkImg.height - 10,
              waterMarkImg.width,
              waterMarkImg.height
            );
            resolve(canvas.toDataURL("image/jpeg"));
          };
        };
      });
    }
  </script>
</html>