字符画生成01

document.querySelector('#char-image-data').innerText.split('\n')；

function draw () {

  let canvas = document.createElement('canvas') 
  let ctx = canvas.getContext('2d')
  let elem = document.querySelector('#char-image-data')  
  let elemSizeRect = elem.getBoundingClientRect()

  canvas.width = elemSizeRect.width
  canvas.height = elemSizeRect.height  
  let textContent = elem.innerText  
  let textList = textContent.split('\n')  
  let len = textList.length  
  
  // color
  ctx.fillStyle = 'black'
  ctx.font =  elem.style.fontSize + ' monospace'

  const LINE_HEIGHT = parseInt(elem.style.lineHeight) 
   
  for (let index = 0; index < len; index++) {
    ctx.fillText(
      textList[index],      0, // x
      LINE_HEIGHT * (index + 1) // y
    )
  }  
  
  document.body.appendChild(canvas)  
  let img = document.createElement('img')
  img.src = canvas.toDataURL()  
  
  let downloadLink = document.createElement('a')
  
  downloadLink.download = 'text-img-' + Date.now() + '.png'

  downloadLink.href = img.src
  
  downloadLink.click()
  
  downloadLink.innerHTML = "下载图片"
  downloadLink.style.fontSize = '20px'
  downloadLink.style.display = 'block'
  downloadLink.style.padding = '1em'

  document.body.appendChild(downloadLink)
  
}

draw()