vue绘制Canvas以及将Canvas保存为图片下载

本文链接：https://blog.csdn.net/fukua007/article/details/134810435

本文介绍了如何使用CanvasAPI在JavaScript中实现图片绘制，包括设置背景、绘制文字，并演示了下载证书的方法。还讨论了如何处理Canvas文字超出时的自动换行功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.绘制Canva画布

<canvas width="375" height="250" ref="canvas" id="myCanvas"></canvas>


/**
   * @description: Canvas图片展示
   * @return
   */
  CanvasView(): void {
    const { canvas } = this.$refs;
    const ctx = canvas.getContext("2d");
    // 图片背景
    ctx.beginPath();
    const img = new Image();
    img.crossOrigin = "Anonymous"; // 解决图片跨域问题
    img.src = `${this.oss}/zhenShuBG.png`;
    // 图片加载完成之后绘制图片：
    img.onload = function () {
      ctx.drawImage(img, 0, 0, 375, 250); // 在(0,0)处绘制被拉成500×500像素的图片
    };
    ctx.globalCompositeOperation = "source-over";
    ctx.fill();
    // 文字
    ctx.beginPath();
    // ctx.font = "30px Verdana"
    ctx.fillText("王大锤 同志：", 50, 100, 100);
    this.toFormateStr(
      ctx,
      "       在2023年度培训考核消防安全考试答题中取得优异成绩,特此表彰，以资  在2023年度培训考核消防安全考试答题中取得优异成绩，特此表彰，以资 ",
      280,
      3,
      50,
      125,
      20,
    );
    ctx.fillText("南京市秦淮区政府", 250, 190, 150);
    ctx.fillText("2023年12月15日", 250, 210, 100);
    ctx.globalCompositeOperation = "destination-over";
    ctx.fill();
  }

2.下载证书

/**
   * @description: 下载证书
   * @return
   */
  downloadCertificate(): void {
    const { canvas } = this.$refs;
    canvas.toBlob((blob) => {
      // blob将base64编码的src 以二进制的形式存进了 Blob对象
      const a = document.createElement("a");
      a.download = "证书.png";
      a.href = window.URL.createObjectURL(blob);
      a.click();
      // eslint-disable-next-line no-console
      console.log(blob);
    }, "image/png");
  }

3.Canvas文字超出自动换行

/**
   * 计算换行文字
   *  参数解析：
   *
   * 	ctx:  canvas绘图上下文
   * 	str:  需要绘制的文本内容
   * 	draw_width:  绘制后的文字显示宽度
   * 	lineNum:  最大行数，多出部分用'...'表示， 如果传-1可以达到自动换行效果
   * 	startX:  绘制文字的起点 X 轴坐标
   * 	startY:  绘制文字的起点 Y 轴坐标
   *	steps:  文字行间距
   */
  // eslint-disable-next-line camelcase
  toFormateStr(ctx, str, draw_width, lineNum, startX, startY, steps) {
    const strWidth = ctx.measureText(str).width; // 测量文本源尺寸信息（宽度）
    let startpoint = startY;
    let keyStr = "";
    // eslint-disable-next-line camelcase
    const sreLN = strWidth / draw_width;
    const liner = Math.ceil(sreLN); // 计算文本源一共能生成多少行
    const strlen = parseInt(str.length / sreLN, 10); // 等比缩放测量一行文本显示多少个字符

    // 若文本不足一行，则直接绘制，反之大于传入的最多行数（lineNum）以省略号（...）代替
    // eslint-disable-next-line camelcase
    if (strWidth < draw_width) {
      ctx.fillText(str, startX, startpoint);
    } else {
      for (let i = 1; i < liner + 1; i++) {
        const startPoint = strlen * (i - 1);
        if (i < lineNum || lineNum === -1) {
          keyStr = str.substr(startPoint, strlen);
          ctx.fillText(keyStr, startX, startpoint);
        } else {
          keyStr = `${str.substr(startPoint, strlen - 5)  }...`;
          ctx.fillText(keyStr, startX, startpoint);
          break;
        }
        startpoint += steps;
      }
    }
  }