canvas给图片添加水印

学敲代码的Stars

已于 2024-05-18 17:48:15 修改

阅读量175

点赞数 1

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

于 2024-04-25 16:19:56 首次发布

本文链接：https://blog.csdn.net/xX20010124/article/details/138191654

版权

文章介绍了如何使用JavaScript异步操作处理用户上传的文件，包括读取图片URL，创建canvas并添加水印，最后将带有水印的文件转换为Blob对象。

摘要由CSDN通过智能技术生成

从文件读取图片的url

function loadFileUrl(file) {
  return new Promise((resolve, reject) => {
    const a = new FileReader();
    a.onload = function (res) {
      if (res && res.target) {
        resolve(res.target.result);
      } else {
        reject(new Error('读取文件url失败'));
      }
    };
    a.readAsDataURL(file);
  });
}

加载画布

function loadFileCanvas(file) {
  return new Promise((resolve, reject) => {
    loadFileUrl(file).then(url => {
      const img = new Image();
      img.onload = function () {
        if (this.complete) {
          const canvas = document.createElement('canvas');
          canvas.height = img.height;
          canvas.width = img.width;
          const ctx = canvas.getContext('2d');
          ctx.drawImage(img, 0, 0);
          resolve({canvas, ctx, img});
        } else {
          reject(new Error('水印添加，文件加载失败'));
        }
      };
      img.src = url;
    }).catch(reject);
  });
}

添加水印

new Promise((resolve, reject) => {
	loadFileCanvas(file).then(({canvas, ctx}) => {
      // 为上传图片添加水印效果
      // 绘制水印
      ctx.textAlign = 'center';
      ctx.fillStyle = '#223355';// 配置字体颜色
      ctx.font = '12px normal PingFangSC-Regular';
 	  ctx.fillText('水印内容', 40, 40); // 后面两个参数分别为x、y偏移量
      // 输出文件
      canvas.toBlob(blob => {
        if (!blob) {
          reject(new Error('添加水印异常'));
          return;
        }
        const waterMarkFile = new File([blob], file.name, {
          type: file.type,
          lastModified: file.lastModified,
        });
        resolve(waterMarkFile);
      });
   });
});