vue中使用canvas画海报

使用ES6新增语法中的canvas画图，在HTML部分插入标签

<div style="width: 100%">
        <img
          style="height: 100%; widht: 100%; margin-right: 5%"
          :src="image"
          class="img"
          alt=""
        />
        <canvas
          id="mycanvas"
          width="750"
          height="750"
          class="my-canvas"
        ></canvas>
      </div>

然后在methods中写入canvas方法，如果连接后台返回数据的话可以在data中声明后放入方法内

 

data() {
    return {
      image: "",
      canvas_touxiang: "",
      nane: "",
      fuwushang: "",
      zhiwu: "",
      zhengzaizhaoping: "",
      canvas_serviceType: "",
      convas_salary: "",
      canvas_workExperience: "",
      canvas_xueli: "",
      canvas_sex: "",
      canvas_fuwushang: "",
      canvas_erweima: "",
      canvas_time: "",
     }
}

 因为我的代码比较多，所以data中不一定是全部的，还是根据需求更改吧

drawPhoto() {
      this.canvas_sex = this.sexData[this.tuijian_sex].label;
      this.canvas_xueli = this.educationData[this.tuijian_education].label;
      this.getImage(this.canvas_touxiang, 200, 200).then((imgUrl) => {
        let canvas = document.getElementById("mycanvas"); //创建canvas
        let context = canvas.getContext("2d"); //创建画布
        let img1 = new Image(); //因为拿不到图片静态资源，所以创建图片标签
        let img2 = new Image();
        let img3 = new Image();
        let img4 = new Image();
        img2.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前，否ze大部分浏览器会报错
        img3.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前，否ze大部分浏览器会报错
        img1.src = require("../../../../assets/returnVisit/haibao.png");
        img2.src = imgUrl;
        img3.src = require("../../../../assets/returnVisit/yinhao.png");
        img4.src = "data:image/jpeg;base64," + this.canvas_erweima;
        //加载图片
        img1.onload = () => {
          canvas.setAttribute("width", img1.width);
          canvas.setAttribute("height", img1.height);
          //绘制图片
          context.drawImage(img1, 0, 0, img1.width, img1.height);
          context.drawImage(img2, 110, 200, 200, 200);
          context.drawImage(img3, 130, 1200, 108, 94);
          context.drawImage(img4, 550, 2100, 400, 400);
          // context.arc();
          // context.drawImage(this.canvas_touxiang, 1, 1);
          //字体大小
          //字体文字，显示位置  图片上需要n个文字就写n个context.fillText(文字,上下,左右);
          context.font = "64px Arial";
          context.fillStyle = "white";
          context.fillText(this.nane, 354, 260);
          context.font = "56px Arial";
          context.fillStyle = "white";
          context.fillText(this.fuwushang + "服务商 · " + this.zhiwu, 354, 350);
          context.font = "56px Arial";
          context.fillStyle = "white";
          context.fillText(this.zhengzaizhaoping, 130, 550);
          context.font = "120px Arial";
          context.fillStyle = "white";
          context.fillText(
            this.serviceTypeData[this.tuijian_valueType].label,
            130,
            700
          );
          context.font = "160px Arial";
          context.fillStyle = "white";
          context.fillText(this.convas_salary, 130, 880);
          context.font = "64px Arial";
          context.fillStyle = "white";
          context.fillText(
            this.tuijian_city +
              " · " +
              this.tuijian_area +
              " | " +
              this.canvas_workExperience +
              " | " +
              this.canvas_xueli +
              " | " +
              this.canvas_sex,
            130,
            1000
          );
          context.fillText("—", 130, 1400);
          context.font = "56px Arial";
          context.fillStyle = "white";
          context.fillText(this.canvas_fuwushang, 130, 1500);
          context.font = "52px Arial";
          context.fillStyle = "white";
          context.fillText(this.canvas_time, 130, 1600);
          context.font = "48px Arial";
          context.fillStyle = "#FF8E5F";
          context.fillText("长按识别二维码", 580, 2550);
          //合成图片
          this.image = canvas.toDataURL("image/jpg", 1.0);
        };
      });
    },

需求中需要的海报内容多，有一个头像需要做成圆形的，所以分出一个方法单独画出圆形头像

// 生成图片getImage和drawPhoto
    getImage(url, width, height) {
      return new Promise((r1, r2) => {
        //画布
        let canvas = document.createElement("canvas");
        canvas.width = width;
        canvas.height = height;
        // 画笔
        let ctx = canvas.getContext("2d");
        let img = new Image();
        img.src = url;
        img.setAttribute("crossOrigin", "anonymous"); //解决图片跨域问题,也要放到赋值前，否ze大部分浏览器会报错
        img.onload = function () {
          ctx.beginPath();
          ctx.arc(100, 100, 100, 0, Math.PI * 2);
          ctx.fill();
          ctx.clip();
          ctx.drawImage(this, 0, 0, width, height);
          r1((this.image = canvas.toDataURL("image/jpg", 1.0)));
        };
      });
    },