给图片添加水印

最新推荐文章于 2024-09-25 14:00:00 发布

曾不错吖

最新推荐文章于 2024-09-25 14:00:00 发布

阅读量187

点赞数 2

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/sisuiban/article/details/140519511

版权

      var ele = "";
      // 判断 url 是否已经包含域名，如果不包含则添加域名
      if (src.startsWith("http://") || src.startsWith("https://")) {
        ele = src; // 如果已经包含域名，则使用传进来的 src
      } else {
        var domain = "https://jwwbaidurk"; // 替换为实际的域名
        ele = domain + src; // 否则添加域名后构建完整的 src
      }
      console.log(ele, "new watermark", src);
      function hexToRgba(hex, alpha) {
        // 将十六进制颜色值转换为RGB格式
        let r = parseInt(hex.slice(1, 3), 16);
        let g = parseInt(hex.slice(3, 5), 16);
        let b = parseInt(hex.slice(5, 7), 16);

        // 构造RGBA格式字符串
        let rgba = `rgba(${r}, ${g}, ${b}, ${alpha})`;

        return rgba;
      }

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

      let image = new Image();
      image.crossOrigin = "anonymous";
      image.src = ele;
      image.onload = () => {
        let { width, height } = image;
        canvas.width = width;
        canvas.height = height;

        ctx.drawImage(image, 0, 0);
        ctx.font = `${res.data[0].size}px Arial`;// 水印字体大小
        ctx.fillStyle = hexToRgba(res.data[0].colour, res.data[0].transparency); //水印的颜色和透明的
        ctx.textAlign = "center";

        // 保存画布状态
        ctx.save();

        // 循环绘制水印
        const interval = 200; // 水印间隔
        for (let x = 0; x < width; x += interval) {
          for (let y = 0; y < height; y += interval) {
            ctx.translate(x, y);
            ctx.rotate(-Math.PI / 4);
            ctx.fillText(res.data[0].name, 0, 0);//水印文字
            ctx.restore(); // 恢复画布状态
            ctx.save(); // 保存画布状态
          }
        }

        // 恢复画布状态
        ctx.restore();

        // 将 canvas 转为 base64 格式的图片
        let dataURL = canvas.toDataURL("image/png");
        console.log("看看base64", dataURL);
      };