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

Question

我正在使用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。 我在这里先向您的帮助表示感谢。 如果还有其他更好的方法，请提出建议

Answer 1

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

DEMO

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

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