canvas+qrcodeImg+描述信息

.hidden {
  display: none;
}

import React from "react";
import ReactDOM from "react-dom";
import "./canvas-img.css";
const qrcode =
  "https://qr.api.cli.im/qr?data=700031587707770&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=260&kid=cliim&key=f2febead60ecfddd5314cd17bb9d398b";
const height = 220;
const width = 340;
const titleHeight = 20;
const pix = 1.5;
const fsize = 14;
let dy = 15;
export default class CanvasImage extends React.Component {
  componentDidMount() {
    const canvas = this.refs.canvas;
    const ctx = canvas.getContext("2d");
    const img = this.refs.image;
    const fonStyle = `${fsize}px Courier`;
    const fillText = this.props.content;
    img.onload = () => {
        // 起始点
      const startY = titleHeight + 6 + 6;
      const startX = 6;
      const desCount = Object.keys(fillText.des).length;
      console.log(desCount);
      // 内容单项
      const innerHeight = Math.floor((height - startY) / desCount) - 4;
      console.log(innerHeight);
      // 根据比例计算间隔
      const dy = Math.floor(innerHeight - fsize);
      console.log(dy);
      // 绘制边框
      ctx.lineWidth = "1";
      ctx.beginPath();
      ctx.rect(0, 0, 340, 220);
      ctx.stroke();
      // title
      ctx.font = `${titleHeight}px bold`;
      ctx.fillText(fillText["hosp"], 340 / 5, titleHeight);
      let i = 0;
      // qrcode
      ctx.drawImage(
        img,
        startX,
        (height - 100) / 2,
        100,
        (100 * img.height) / img.width
      );
      // des
      ctx.font = fonStyle;
      for (let key in fillText.des) {
        ctx.fillText(
          `${key}: ${fillText.des[key]}`,
          110,
          startY + innerHeight * ++i
        );
      }
    };
  }

  render() {
    return (
      <span>
        <canvas ref="canvas" width={width} height={height} />
        <img ref="image" src={this.props.content.qrcode} className="hidden" />
      </span>
    );
  }
}

import React from "react";
import ReactDOM from "react-dom";
import CanvasImage from "./component/canvas-img.js";
import "./styles.css";

function App() {
  const contents = [
    {
      id: 0,
      hosp: "XX市第一人民医院",
      des: {
        设备名称: "心电监测仪",
        设备编号: "1000315811011110",
        规格型号: "SYCC007",
        使用科室: "门诊室",
        使用房间: "1楼108",
        领用时间: "2010-12-26"
      },
      qrcode:
        "https://qr.api.cli.im/qr?data=1000315811011110&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=260&kid=cliim&key=1489ea85c2c309ffa295a9f51ce641cc"
    },
    {
      id: 1,
      hosp: "XX市第一人民医院",
      des: {
        设备名称: "便携式心电监测仪",
        设备编号: "700031587707770",
        规格型号: "SYCC001",
        使用科室: "急诊室",
        使用房间: "3楼108",
        领用时间: "2010-12-26"
      },
      qrcode:
        "https://qr.api.cli.im/qr?data=700031587707770&level=H&transparent=false&bgcolor=%23ffffff&forecolor=%23000000&blockpixel=12&marginblock=1&logourl=&size=260&kid=cliim&key=f2febead60ecfddd5314cd17bb9d398b"
    }
  ];
  return (
    <div className="App">
      {contents.map(item => (
        <CanvasImage key={item.id} className="canvasQrocde" content={item} />
      ))}
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);