js生成心电图图片

---

前言

之前写的一个心电图vue组件，发现数据量大时渲染速度极慢，想了想是不是可以用先生成图片再渲染，于是开干（新手请大佬们多多指点哈）

---

一、创建EcgClass（canvas生成图片类）

class EcgClass {
  w
  h
  canvas
  context
  img
  s = 10
  /**
   * 
   * @param {*} s 秒
   * @param {*} h 高度
   * @returns 
   */
  initGrid (s, h = 600) {
    const canvas = document.createElement('canvas')
    this.canvas = canvas
    this.context = this.canvas.getContext('2d')
    this.s = s
    this.w = canvas.width = 125 * s // 根据显示多少秒计算图片宽度
    this.h = canvas.height = h
    this.drawSmallGrid()
    this.drawMediumGrid()
    this.drawBigGrid()
    return new Promise((resolve) => {
      this.img = canvas.toDataURL()
      this.imgDom = new Image()
      this.imgDom.src = this.img
      this.imgDom.onload = () => {
        resolve(this.img)
      }
    })
  }
  drawSmallGrid () {
    this.context.strokeStyle = '#F2E0E1'
    this.context.strokeWidth = 1
    this.context.beginPath()
    for (var x = 1; x < this.w; x  = 5) {
      this.context.moveTo(x, 0)
      this.context.lineTo(x, this.h)
      this.context.stroke()
    }
    for (var y = 1; y < this.h; y  = 5) {
      this.context.moveTo(0, y)
      this.context.lineTo(this.w, y)
      this.context.stroke()
    }
    this.context.closePath()
  }
  drawMediumGrid () {
    this.context.strokeStyle = '#F0B1AE'
    this.context.strokeWidth = 1
    this.context.beginPath()
    for (var x = 1; x < this.w; x  = 25) {
      this.context.moveTo(x, 0)
      this.context.lineTo(x, this.h)
      this.context.stroke()
    }
    for (var y = 1; y < this.h; y  = 25) {
      this.context.moveTo(0, y)
      this.context.lineTo(this.w, y)
      this.context.stroke()
    }
    this.context.closePath()
  }
  drawBigGrid () {
    this.context.strokeStyle = '#e0514b'
    this.context.strokeWidth = 1
    this.context.beginPath()
    for (var x = 1; x < this.w; x  = 125) {
      this.context.moveTo(x, 0)
      this.context.lineTo(x, this.h)
      this.context.stroke()
    }
    for (var y = 1; y < this.h; y  = 125) {
      this.context.moveTo(0, y)
      this.context.lineTo(this.w, y)
      this.context.stroke()
    }
    this.context.closePath()
  }
  drawEcg (ecgDataArrays = []) {
    this.context.strokeStyle = '#707070'
    this.context.strokeWidth = 0.1
    this.context.beginPath()
    // ecgDataArrays = ecgDataArrays.reverse()
    const sum = parseInt(this.dataRate / 5 / 5 / 5)
    for (let i = 0; i < ecgDataArrays.length; i  = 1) {
      let y = (ecgDataArrays[i] - 1750) * 1 // 1887 Math.random() * 280   this.h/2-100;
      let x = i / sum
      this.context.lineTo(x, y)
    }
    this.context.stroke()
    this.context.closePath()
  }
	/**
   * 
   * @param {*} data  心电数据
   * @param {*} dataRate  采样率
   * @returns 
   */
  setData (data, dataRate) {
    this.dataRate = dataRate
    this.canvas.width = this.w
    this.canvas.height = this.h
    this.context.drawImage(this.imgDom, 0, 0)
    this.drawEcg(data)
    return this.canvas.toDataURL()
  }
}
export default EcgClass

二、使用步骤

1. new EcgClass

	const ecg = new EcgClass(）

2.获取图片

await ecg.initGrid(10, 600) // 获取心电背景网格  new Image()  返回 base64
ecg.setData(data, dataRate) // 获取完整心电图

---

这篇好文章是转载于：学新通技术网