js实现为base64图片添加文字水印和图片水印

烟雨客栈

已于 2023-08-16 14:52:13 修改

阅读量798

点赞数 2

分类专栏：其他文章标签： javascript 开发语言

于 2023-08-16 14:29:44 首次发布

本文链接：https://blog.csdn.net/qq_30152271/article/details/132318452

版权

其他专栏收录该内容

4 篇文章 1 订阅

订阅专栏

使用以下函数添加水印后可以点击链接查看base64位图片，将结果复制后查看效果

let file='data:image/png;base64,XXXXXXXXXXXXXXXXX';  //测试时请换成真正的base64位图片
let result1=fillTextToImg(file);    //添加文字水印
console.log(result1);
let result2=fillImgToImg(file); 	//添加图片水印
console.log(result2);
/**
 * 为base64位图片添加文字水印
 */
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 = canvas.width / 20;
      ctx.font = remFontSize + "px";
      ctx.textAlign = "left";
      ctx.fillStyle = "#ffffff";
      const name='@江西南昌'; //添加的文字水印内容
      const spaceH = remFontSize * 0.3;
      ctx.fillText(name,20, canvas.height - remFontSize - spaceH);
      resolve(canvas.toDataURL("image/jpg"));
    };
  });
}

/**
*将图片转换为base64
*/
async function getImgBase64(url,width=50){
  const img = new Image();
  img.src = url;
  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"));
    };
  });
}

/**
*为base64位图片添加图片水印,waterMark为水印图片
*/
function fillImgToImg(base64,waterMark){
 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"));
      };
    };
  });
}