个人中心
gpt4 book ai didi

javascript - 有没有办法将表格和 Canvas 组合成一个图像？

转载 作者：行者123 更新时间：2023-11-30 16:21:03 26 4
gpt4 key购买 nike

上下文

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

  • 该页面包含一个表格和一个用于绘制基于JavaScript 代码的图像的 Canvas 。

  • 我知道如何将 canvas 元素转换为图像(通过使用 toDataURL())。

问题

我还需要将 HTML 表格与 Canvas 结合起来，并将其生成为单个图像。有办法吗？

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

工作 fiddle :(请注意，我将生成的 Canvas 图像附加到正文中)

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>

关于javascript - 有没有办法将表格和 Canvas 组合成一个图像？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/34741028/

26 4 0
文章推荐： javascript - RequireJS with Knockout - 多次应用绑定(bind)
文章推荐： javascript - 使用 angularJS 和输入类型 ="date"更新 mongodb 中的日期
文章推荐： javascript - 如何使用javascript将数据放入HTML表格
文章推荐： javascript - 仅将输入的字符从一个文本框复制到另一个文本框
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com