Невозможно добавить новый элемент холста с существующим - PullRequest
Новая
       28

Невозможно добавить новый элемент холста с существующим

0 голосов
/ 07 мая 2018

Я использую 2 элемента canvas. Я использую один элемент в качестве основного элемента холста, который имеет все элементы. Я создаю штрих-код на отдельном холсте и хотел бы добавить его на основной холст. Стараюсь долго. Добавление примера здесь 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. Спасибо за помощь заранее. Если есть какой-нибудь другой способ, пожалуйста, предложите

Ответы [ 2 ]

0 голосов
/ 07 мая 2018

Функция 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);
});
0 голосов
/ 07 мая 2018

вы можете использовать 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>
...