给照片添加水印和logo(这是input选择图片打水印方法,如果想直接给图片打水印,把input选择图片加载的过程替换掉就可以)

1.实现思路:首先就是获取图片信息,new一个新的image标签,用来存储图片,等图片加载时(image.onload--有时候并不会生效,可以用定时器代替),用canvas截取图片(canvas的宽高最好是跟图片一样),添加你所需要的水印信息,添加logo即重复一遍new新标签的过程,然后加载,然后添加水印信息.最后导出即可(导出的图片为base64)

2.代码:

DOM:   <input

      type="file"

      name=""

      id="file"

      @change="getImgFile(logo, src, imgSrcList, firstChooseSrc, basicsUnit)"

      capture="camera"

    />

 data() {

    return {

      logo,

      src: "",

      firstChooseSrc: [],

      imgSrcList: [], //打水印的小图

      bigImgSrcList: [], //打水印的大图

      basicsUnit: {

        imgWidth: 1000, //基础的宽

        imgHeight: 1000, //基础的高

        scale: 1, //缩放比例

      },

      userChoosePicList: [],

    };

  },

methods:{

        

getImgFile(logo, src, imgSrcList, firstChooseSrc, basicsUnit) {

      // 新建一个读取input选择框的文件

      let reads = new FileReader();

      // 获取input选择的图片信息

      let imgFile = document.getElementById("file").files[0];

      // 进行读取

      reads.readAsDataURL(imgFile);

      reads.onload = function () {

        // 获取选择图片的路径

        const url = this.result;

        // 把第一次选择的图片放到数组,以放大预览

        firstChooseSrc.push(url);

        // console.log(firstChooseSrc,'这是第一次添加的图片')

        // 新创建的一个标签，用来存选择的图片路径

        const img = new Image();

        img.src = url;

        img.crossOrigin = "anonymous";

        //声明一个基础度量单位变量，之后的都由此来定义

        // const imgWidth = 1000,

        //   imgHeight = 1000;

        const { imgWidth, imgHeight } = basicsUnit;

        const canvas = document.getElementById("canvas-1");

        // 给canvas设置宽高

        canvas.width = imgWidth * 0.1;

        canvas.height = imgHeight * 0.1;

        // 得出缩小图和放大的比例

        basicsUnit.scale =

          document.documentElement.clientWidth / (imgWidth * 0.1);

        // debugger

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

        // 因为canvas画图是一个异步的过程，所以声明一个定时器

        const clearId = setTimeout(function () {

          ctx.drawImage(img, 0, 0, imgWidth * 0.1, imgHeight * 0.1);

          const logoImg = new Image();

          logoImg.src = logo;

          logoImg.crossOrigin = "anonymous";

          logoImg.onload = () => {

            // ctx.drawImage(logoImg, 30, 400, 50, 50);

            ctx.drawImage(logoImg, 0, 0, imgWidth * 0.01, imgHeight * 0.01);

            // 设置文字对齐方式

            ctx.textBaseline = "top";

            // 设置文字大小和字体样式

            // ctx.font = "6px Microsoft YaHei";

            ctx.font = `${imgWidth * 0.006}px Microsoft YaHei`;

            // 设置文字内容

            ctx.fillText("唐永强", 0, imgHeight * 0.02);

            ctx.fillText("27", 0, imgHeight * 0.04);

            // 渲染完成

            ctx.fill();

            // 把添加好文字和logo的图片导出

            const base64Url = canvas.toDataURL("image/png", 1.0);

            src = base64Url;

            imgSrcList.push(src);

            console.log(imgSrcList, "1111");

            // 清除画布--因为canvas占位置，所以要给其添加样式，远离界面

            ctx.clearRect(0, 0, imgWidth, imgHeight);

            // 清除定时器，释放内存

            clearTimeout(clearId);

          };

        }, 500);

      };

    },

}

如果发现图片的.onload方法不执行或者失效,可以用定时器替换(定时器可以采用递归的方法写,也可以自己用promise包装一下),如果报错,多看看canvas的宽高是否设置成功,要截图的图片是否存在(我编写的时候,经常报错,心态要炸了)