无法使用现有元素添加新的画布元素答案

【问题标题】：Unable to add new canvas element with an existing one无法使用现有元素添加新的画布元素
【发布时间】：2018-10-17 08:53:21
【问题描述】：

我正在使用 2 个画布元素。我使用一个元素作为具有所有元素的主要画布元素。我正在单独的画布中生成条形码，并希望将其添加到主画布中。试了很久。在此处添加示例fiddle

$(document).ready(function() {
 JsBarcode('#barcode', "1234", {
    width: 4,
    height: 20//displayValue: false
  });
  var bc = document.getElementById("barcode");
  var canvasx = bc.getContext("2d");
  var img1 = new Image();
  img1.src = bc.toDataURL("image/png");


  var c = document.getElementById("labelDesigner");
  var canvas = bc.getContext("2d");
  c.drawImage(img1);

});

我正在使用 facric.js 和 JsBarcode。我在这里先向您的帮助表示感谢。如果有其他更好的方法欢迎建议

【问题讨论】：

标签： javascript canvas html5-canvas fabricjs

【解决方案1】：

您可以使用fabric.Image.fromURL 并将条形码画布数据作为 url 传递。

演示

$(document).ready(function() {
  JsBarcode('#barcode', "1234", {
    width: 4,
    height: 20 //displayValue: false
  });
  var canvas = new fabric.Canvas("labelDesigner");
  var bc = document.getElementById("barcode");
  fabric.Image.fromURL(bc.toDataURL(),function(img){
   img.set({
      left: 0,
      top: 0
    })
   canvas.add(img);
  })
});

canvas[id^=c], div[id=output] {
    border: 1px solid red;
}

canvas[id=buffer] {
    border: 1px dotted green;
}

#output {
    padding: 15px;
}

#output img {
    border: 1px dotted blue;
}

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jsbarcode/3.9.0/JsBarcode.all.min.js"></script>
<canvas id="barcode"></canvas>
<canvas id="labelDesigner" width="410" height="200" style="border:1px solid #000000;margin-left:200px"></canvas>

【讨论】：

谢谢。我的期待也是一样。太棒了

【解决方案2】：

drawImage-函数可以将另一个画布作为参数，因此您不必在中间转换为图像。但是，它总是需要 x 和 y 坐标作为第二个和第三个参数。

您还交换了 c 和 canvas 变量：

$(document).ready(function() {
 JsBarcode('#barcode', "1234", {
    width: 4,
    height: 20//displayValue: false
  });
  var bc = document.getElementById("barcode");
  var c = document.getElementById("labelDesigner");
  var context = c.getContext("2d");

  context.drawImage(bc, 0, 0);
});

【讨论】：