如何将Html 5画布转换为图像

Question

我使用下面的代码创建了html 5 canvas。

＆＃13;

＆＃13;

var p1 = new Promise(
  function(resolve, reject) {
    $.post('<?= Url('
      sheet / drowhole ')?>', {
        id: <?= $row - > id ?>
      }, function() {}).done(function(data) {
      var data = JSON.parse(data);
      var deep = data.end[(data.end.length - 1)];
      var c = document.getElementById("hole");
      var ctx = c.getContext("2d");
      ctx.clearRect(0, 0, 400, 850);
      ctx.strokeStyle = '#000000';
      ctx.strokeRect(100, 25, 200, 800);
      drowMatiral(ctx, data, deep);
      droArrow(ctx, data, deep);
      drowText(ctx, data, deep);
      canvesRwritSideDraw(ctx, data, deep);
      waterLavel(ctx, data, deep);
      resolve(c);
    });
  });
p1.then(function(c) {

});

function drowText(ctx, data, deep) {
  for (var i = 0; i < data.material.length; i++) {
    ctx.font = "12px Times New Roman";
    ctx.fillStyle = "Black";
    ctx.fillText(data.start[i] + " m", 40, (25 + data.start[i] * 800 / deep));
    ctx.fillText(data.end[i] + " m", 40, (25 + data.end[i] * 800 / deep));
    ctx.fillStyle = "Black";
    ctx.font = "15px bold Times New Roman";
    ctx.fillText(data.material[i], 10, ((((data.end[i] - data.start[i]) / deep) * 800 / 2) + 29) + (data.start[i] / deep) * 800);
  }
}

function waterLavel(ctx, data, deep) {
  var lineJoin = ['round'];
  ctx.lineWidth = 4;
  ctx.lineJoin = lineJoin[0];
  ctx.beginPath();
  ctx.moveTo(0, ((data.water_lavel / deep) * 800) + 25);
  ctx.lineTo(400, ((data.water_lavel / deep) * 800) + 25);
  ctx.strokeStyle = '#66ffff';
  ctx.globalCompositeOperation = 'destination-over';
  ctx.stroke();

}

function droArrow(ctx, data, deep) {
  for (var i = 0; i < data.material.length; i++) {
    var lineJoin = ['round'];
    ctx.lineWidth = 0.4;
    ctx.lineJoin = lineJoin[0];
    ctx.beginPath();
    ctx.moveTo(90, (data.start[i] / deep) * 800 + 25);
    ctx.lineTo(80, (data.start[i] / deep) * 800 + 25);
    ctx.lineTo(80, ((((data.end[i])) - (data.end[i] - data.start[i]) / 2) / deep) * 800 + 23);
    ctx.lineTo(76, ((((data.end[i])) - (data.end[i] - data.start[i]) / 2) / deep) * 800 + 25);
    ctx.lineTo(80, ((((data.end[i])) - (data.end[i] - data.start[i]) / 2) / deep) * 800 + 27);
    ctx.lineTo(80, (((data.end[i])) / deep) * 800 + 25);
    ctx.lineTo(90, (((data.end[i])) / deep) * 800 + 25);
    ctx.strokeStyle = '#000000';
    ctx.stroke();
  }
}

function drowMatiral(ctx, data, deep) {

  var imgs = [];
  for (var i = 0; i < data.material.length; i++) {
    imgs[i] = new Image();
    imgs[i].src = '<?= Url('
    ');?>/' + data.img[i];
    imgs[i].startingPoingY = (data.start[i] * 800 / deep) + 25;
    imgs[i].deep = (data.end[i] - data.start[i]) * 800 / deep;
    imgs[i].onload = (function() {
      var ptrn = ctx.createPattern(this, 'repeat');
      ctx.fillStyle = ptrn;
      ctx.fillRect(100, this.startingPoingY, 100, this.deep);

    });
  }

}

function canvesRwritSideDraw(ctx, data, deep) {
  ctx.fillStyle = "rgba(255, 255, 0, 0.4)";
  ctx.fillRect(200, 25, 100, Math.max.apply(Math, data.field) * 800 / deep);
  ctx.font = "12px Times New Roman";
  ctx.fillStyle = "Black";
  ctx.fillText('0 m', 340, 25);
  var lineJoin = ['round'];
  ctx.lineWidth = 0.4;
  ctx.lineJoin = lineJoin[0];
  ctx.beginPath();
  ctx.moveTo(300, 25);
  ctx.lineTo(330, 25);
  ctx.stroke();
  var x = deep / 10;
  var x1 = deep / 20;
  var x2 = deep / 100;
  for (var j = 0; x2 < deep; j++) {

    ctx.font = "12px Times New Roman";
    ctx.fillStyle = "Black";
    ctx.fillText(x.toFixed(2) + ' m', 340, (x * 800 / deep) + 25);

    var lineJoin = ['round'];
    ctx.lineWidth = 0.4;
    ctx.lineJoin = lineJoin[0];
    ctx.beginPath();
    ctx.moveTo(280, 25 + (x * 800 / deep));
    ctx.lineTo(330, 25 + (x * 800 / deep));
    ctx.stroke();
    var lineJoin = ['round'];
    ctx.lineWidth = 0.4;
    ctx.lineJoin = lineJoin[0]
    ctx.beginPath();
    ctx.moveTo(300, 25 + (x1 * 800 / deep));
    ctx.lineTo(330, 25 + (x1 * 800 / deep));
    ctx.stroke();

    var lineJoin = ['round'];
    ctx.lineWidth = 0.4;
    ctx.lineJoin = lineJoin[0]
    ctx.beginPath();
    ctx.moveTo(300, 25 + (x2 * 800 / deep));
    ctx.lineTo(310, 25 + (x2 * 800 / deep));
    ctx.stroke();
    x = x + deep / 10;
    x1 = x1 + deep / 20;
    x2 = x2 + deep / 100;
  }

  for (var i = 0; i < data.field.length; i++) {
    var lineJoin = ['round'];
    ctx.lineWidth = 0.3;
    ctx.lineJoin = lineJoin[0];
    ctx.beginPath();
    ctx.moveTo(200, (data.field[i] * 800 / deep) + 25);
    ctx.lineTo(300, (data.field[i] * 800 / deep) + 25);
    ctx.strokeStyle = '#ff0000';
    ctx.stroke();
  }

}

＆＃13;

＆＃13;

＆＃13;

画布的普通视图：

我可以使用下面的代码将此画布下载为图像。

function downloadCanvas(link, canvasId, filename) {
  link.href = document.getElementById(canvasId).toDataURL();
  link.download = filename;
}

图像下载非常完美。

但是当我将此画布转换为图像时，某些部分会被遗漏。我使用下面的代码转换：

p1.then(function (c){
  var imgObj    = c.toDataURL("image/png");
  document.write('<img src="'+imgObj+'"/>');
});

这是转换后的图像。

请告诉我如何将画布转换为图像。