js在线生成证书信息

1. js部分

var can = document.getElementById('myCanVas')
var myCan = can.getContext('2d')
var img = new Image()
img.src = '/img/certificate.png'
// 将image 加载成功之后, 将image导入canvas
img.onload = function () {
  console.log(img.width);
  console.log(img.width)
  $(can).attr("width", img.width / 2);
  $(can).attr("height", img.height / 2);
  myCan.drawImage(img, 0, 0, img.width / 2, img.height / 2)
  // 监听名字修改
  $('.changeName').submit(function (e) {
    console.log(e)
    let name = $('#name').val();
    name = name.trim();
    let courseName = $("#course").val();
    courseName = courseName.trim();
    // 生成名字
    myCan.beginPath()
    myCan.font = '42px Arial'
    myCan.fillStyle = '#3a3e5e'
    myCan.fillText(name, 232, 435)
    // drawText(pr.value, 128, 410, 358);
    // myCan.fillText(da.value, 380, 660);
    // 生成课程
    myCan.font = '32px Arial';
    myCan.fillText(courseName, 365, 490)
    myCan.closePath()
  })

  $('#export').click(function (e) { 
    // 获取canvas 图片资源
    const imageSource = can.toDataURL("image/png");
    var oA = document.createElement('a')
    oA.download = '图片下载'; // 设置下载的文件名，默认是'下载'
    oA.href = imageSource;
    document.body.appendChild(oA);
    oA.click();
    oA.remove();
  })
}