利用canvas把文本和图片结合到一起展示成一张图片在页面展示出来

canvas 使用方法见mdn

canvas使用方法

主要思路

   ## 在html中创建<img> 和 <canvas> 两个标签，<img>初使状态为display:none； <canvas>始终为display:none；紧接着用js去画图，把原始图片和文本结合起来，会返回一个bease64格式的超链接，把超链接地址直接复值给img标签，复制完毕之后设置img标签为display:true 在页面中展示出来。

html部分

  <img :src="img"  v-show=”isshow“/>
        <canvas
          class="extrapolation"
          width="1428"
          height="1872"
          ref="extrapolation"
          id="extrapolation"
          v-show="show"
        />

js部分

import {  ref, onMounted } from "vue";
setup() {
    onMounted(async () => {
          await canvasCode();
         const codes = ref("");
         const isshow = ref(false)
    });
    
   const img = ref();
    const canvasCode = () => {
      const myCanvas = document.querySelector("#extrapolation");
      const myContext = myCanvas.getContext("2d");
      const myImage = new Image();
      myImage.src = require("../../../assets/images/teacher/home/Extrapolation.png");
      myImage.onload = function () {
        //图片加载完毕执行
        myContext.drawImage(myImage, 0, 0, myCanvas.width, myCanvas.height);
        myContext.font = "114px 宋体";
        myContext.lineWidth = 9;
        myContext.strokeStyle = "#164970";
        myContext.strokeText(codes.value, 530, 452);
        //把图片地址赋值给img
        img.value =  myCanvas.toDataURL();
        //图片赋值完毕之后让img标签展现出来
        isshow.value = true;
      };
    };
    return {
      img,
      codes，
    };
  },