有没有一种方法可以将表格和画布组合成一个单独的图像

Is there a way to combine a table and canvas into a single image?

本文关键字：组合 图像 布组合 单独 一个 表格 方法 一种 有没有      更新时间：2023-09-26

上下文

  • 我已经使用HTML和JavaScript创建了一个页面。

  • 该页面包含一个表和一个画布，用于根据JavaScript代码绘制图像。

  • 我知道如何将画布元素转换为图像（通过使用toDataURL（））。

问题

我还需要将HTML表与画布结合起来，并将其生成为一个单独的图像。有办法做到这一点吗？

<!DOCTYPE html>
 <html moznomarginboxes mozdisallowselectionprint>
<head>
<script>
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}
 window.addEventListener('load', onLoadd, false);
 function onLoadd(evt)
{
drawBkg(byId('canvas'), 3.78, "0.35", "green");
}
function drawBkg(canvasElem, squareSize, minorLineWidthStr, lineColStr)
{
var nLinesDone = 0;
var i, curX, curY;
var ctx = canvasElem.getContext('2d');
ctx.clearRect(0,0,canvasElem.width,canvasElem.height);
// draw the vertical lines
curX=0;
ctx.strokeStyle = lineColStr;
while (curX < canvasElem.width)
{
    if (nLinesDone % 5 == 0)
        ctx.lineWidth = 0.69;
    else
        ctx.lineWidth = minorLineWidthStr;
    ctx.beginPath();
    ctx.moveTo(curX, 0);
    ctx.lineTo(curX, canvasElem.height);
    ctx.stroke();
    curX += squareSize;
    nLinesDone++;
}
// draw the horizontal lines
curY=0;
nLinesDone = 0;
while (curY < canvasElem.height)
{
    if (nLinesDone % 5 == 0)
        ctx.lineWidth = 0.69;
    else
        ctx.lineWidth = minorLineWidthStr;
    ctx.beginPath();
    ctx.moveTo(0, curY);
    ctx.lineTo(canvasElem.width, curY);
    ctx.stroke();
    curY += squareSize;
    nLinesDone++;
}
}

function print_voucher(){
var win=window.open();
win.document.write("<br><img style='margin:0' src='"+canvas.toDataURL()+"'/>");
win.print();
win.location.reload();
}
</script>
 </head>
<body>
<div id='txt'></div>
<table style="width:600">
<tr>
    <td>Patient ID:</td>
    <td>1234</td>
</tr>
<tr>
    <td>Patient Name:</td>
      <td>Jackson</td>
</tr>
<tr>
    <td>Patient Age:</td>
    <td>94</td>
</tr>
        <tr>
        <td>Patient Gender:</td>
        <td>Male</td>
    </tr>
</table> 
 <canvas id="canvas" width="1030" height="600"></canvas>
    <button onclick="onDocLoaded()">Click Me</button>
    <input type="button" id="test" value="Print" onClick="print_voucher();"> </input>
</body>
</html>

您可以使用html2canvas。

代码：

function print_voucher() {
  var container = document.getElementById("container");
  html2canvas(container, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
    width: container.width,
    height: container.height
  });
}

工作小提琴：（注意，我将生成的画布图像附加到身体上）

function byId(id, parent) {
  return (parent == undefined ? document : parent).getElementById(id);
}
window.addEventListener('load', onLoadd, false);
function onLoadd(evt) {
  drawBkg(byId('canvas'), 3.78, "0.35", "green");
}
function drawBkg(canvasElem, squareSize, minorLineWidthStr, lineColStr) {
  var nLinesDone = 0;
  var i, curX, curY;
  var ctx = canvasElem.getContext('2d');
  ctx.clearRect(0, 0, canvasElem.width, canvasElem.height);
  // draw the vertical lines
  curX = 0;
  ctx.strokeStyle = lineColStr;
  while (curX < canvasElem.width) {
    if (nLinesDone % 5 == 0)
      ctx.lineWidth = 0.69;
    else
      ctx.lineWidth = minorLineWidthStr;
    ctx.beginPath();
    ctx.moveTo(curX, 0);
    ctx.lineTo(curX, canvasElem.height);
    ctx.stroke();
    curX += squareSize;
    nLinesDone++;
  }
  // draw the horizontal lines
  curY = 0;
  nLinesDone = 0;
  while (curY < canvasElem.height) {
    if (nLinesDone % 5 == 0)
      ctx.lineWidth = 0.69;
    else
      ctx.lineWidth = minorLineWidthStr;
    ctx.beginPath();
    ctx.moveTo(0, curY);
    ctx.lineTo(canvasElem.width, curY);
    ctx.stroke();
    curY += squareSize;
    nLinesDone++;
  }
}
function print_voucher() {
  var container = document.getElementById("container");
  html2canvas(container, {
    onrendered: function(canvas) {
      document.body.appendChild(canvas);
    },
    width: container.width,
    height: container.height
  });
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
<body>
  <div id='txt'></div>
  <div id="container">
    <table style="width:600">
      <tr>
        <td>Patient ID:</td>
        <td>1234</td>
      </tr>
      <tr>
        <td>Patient Name:</td>
        <td>Jackson</td>
      </tr>
      <tr>
        <td>Patient Age:</td>
        <td>94</td>
      </tr>
      <tr>
        <td>Patient Gender:</td>
        <td>Male</td>
      </tr>
    </table>
    <canvas id="canvas" width="1030" height="600"></canvas>
  </div>
  <button onclick="onDocLoaded()">Click Me</button>
  <input type="button" id="test" value="Print" onClick="print_voucher();"></input>

相关文章：