Question

上下文

我使用HTML和JavaScript创建了一个页面。
该页面包含一个表格和一个画布，用于根据JavaScript代码绘制图像。
我知道如何将canvas -element转换为image（通过使用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>

Answer 1

您可以使用html2canvas。

代码：

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

工作小提琴:(请注意，我将生成的画布图像附加到正文）

＆＃13;

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
  });
}

＆＃13;

<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>

＆＃13;

有没有办法将表格和画布组合成单个图像？

1 个答案: