无法使用现有的canvas元素添加新的canvas元素 [英] Unable to add new canvas element with an existing one

问题描述

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

I am using 2 canvas elements. I am using one element as a main canvas element which has all the elements. I am generating a barcode in a separate canvas and would like to add it to the main canvas. Trying for a long time. Adding an example here 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。我在这里先向您的帮助表示感谢。如果还有其他更好的方式建议

I am using facric.js and JsBarcode. Thanks for the help in advance. If there is any other better way kindly suggest

推荐答案

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

you can use fabric.Image.fromURL and pass the barcode canvas data as url.

DEMO

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>

这篇关于无法使用现有的canvas元素添加新的canvas元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！