面料js克隆画布并继续编辑

Question

我想克隆面料js画布并继续编辑克隆画布中的现有面料js对象，但它不起作用。它显示setBackgroundImage是未定义的。

$('#btnClick').on('click touchstart', function() { 
 
    var canvas = document.getElementsByTagName("canvas"); 
 
    // canvas context 
 
    var context = canvas[0].getContext("2d"); 
 
    // get the current ImageData for the canvas 
 
    var data = context.getImageData(0, 0, canvas[0].width, canvas[0].height); 
 
    // store the current globalCompositeOperation 
 
    var compositeOperation = context.globalCompositeOperation; 
 
    // set to draw behind current content 
 
    context.globalCompositeOperation = "destination-over"; 
 
    //set background color 
 
    context.fillStyle = "#FFFFFF"; 
 
    // draw background/rectangle on entire canvas 
 
    context.fillRect(0,0,canvas[0].width,canvas[0].height); 
 

 
    var tempCanvas = document.createElement("canvas"), 
 
    tCtx = tempCanvas.getContext("2d"); 
 
    
 
    tempCanvas.width = 640; 
 
    tempCanvas.height = 480; 
 
    
 
    tempCanvas.setBackgroundImage(''); 
 
}

<canvas><canvas>

Answer 1

使用布库的想法是使用它的方法来简化您的工作。您不会直接与画布元素进行交互。

画布loadFromJSON和toJSON方法是你可以用来克隆你的画布副本，包括backgroundimage。

var canvas = new fabric.Canvas('canvas'); 
 
var canvas2 = new fabric.Canvas('canvas2'); 
 
$(document).ready(function() { 
 
    var rect = new fabric.Rect({width: 100, height:200, fill: 'red'}); 
 
    canvas.add(rect); 
 
    var circle = new fabric.Circle({radius: 80, fill: 'blue'}); 
 
    canvas.add(circle);   
 
    $('#clone').click(
 
     function(){canvas2.loadFromJSON(JSON.stringify(canvas), function(){canvas2.renderAll()}); }) 
 
});

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/1.5.0/fabric.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    
 
<canvas id='canvas' width="500" height="400" style="border:#000 1px solid;"> 
 
</canvas> 
 
<input id="clone" type="button" value="clone canvas"> 
 
<canvas id='canvas2' width="500" height="400" style="border:#000 1px solid;"> 
 
</canvas>