我正在使用2个canvas元素。我使用一个元素作为主要的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。我在这里先向您的帮助表示感谢。如果还有其他更好的方式建议
答案 0 :(得分:1)
您可以使用fabric.Image.fromURL并将条形码画布数据作为网址传递。
<强> 样本 强>
$(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);
})
});
&#13;
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;
}
&#13;
<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>
&#13;
答案 1 :(得分:0)
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);
});