给图片添加水印

      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();

         ctx.rotate((-Math.PI) / 100); //文本选择的角度
            let i = 0,
              j = 0,
              waterMarkerW = res.data[0].name.length * res.data[0].size;
              //在canvas画布上绘制文字 ctx.fillText(文字内容, x位置, y位置, 文本最大宽度)
            for (i = 0; i <(width / waterMarkerW); i++) {
              for(j=0;j<(height/60);j++){
                if(j==0){
                  ctx.fillText(res.data[0].name,i*(waterMarkerW+70),-80,width); //水印文字
                }
                ctx.fillText(res.data[0].name,i*(waterMarkerW+70),j*80,width); //水印文字
              }
            }

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

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