Canvas水印和图片下载

html

<canvas id="cv" width="400" height="400" style="border: 2px solid #f00;"></canvas>

js

// 后台请求过来的文本数据
let text = '20240112';
// 获取画布
let cv = document.querySelector('#cv');
// 获取画笔(也叫上下文对象)
let ctx = cv.getContext('2d');
// 使用Image构造函数创建实例对象
let img = new Image();
// 设置img的src属性
img.src = './dj.png';
// img加载完必后执行该函数
img.onload = () => {
  // 绘制图片(是哪张图片，绘制起始点x，绘制起始点y，绘制宽度，绘制高度)
  ctx.drawImage(img, 0, 0, 400, 400);
  // 设置字体大小和字体类型
  ctx.font = '24px 微软雅黑';
  // 设置字体填充颜色
  ctx.fillStyle = '#fff';
  // 设置字体水平对齐方式
  ctx.textAlign = 'center';
  // 设置字体填充(字体内容，水平位置x，垂直位置y)
  ctx.fillText(text, 200, 360);
  // canvas转换为base64图片格式
  let dataURL = cv.toDataURL();
  // 创建一个a标签
  let a = document.createElement('a');
  // 设置a标签的href属性
  a.href = dataURL;
  // 设置a标签下载图片名称
  a.download = '图片下载';
  // 将a标签添加到body中
  document.body.appendChild(a);
  // 调用a标签的click事件自动下载
  a.click();
  // 将a标签从body中移除
  document.body.removeChild(a);
}