[英]Unable to add new canvas element with an existing one
我正在使用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。 我在這里先向您的幫助表示感謝。 如果還有其他更好的方法,請提出建議
您可以使用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>
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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.