javascript - 使用 Fabric js 克隆 Canvas 并继续编辑

Question

我想使用 Fabric JS 克隆 Canvas 并继续编辑克隆 Canvas 中现有的 Fabric 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

使用fabric库的想法是使用它的方法来简化你的工作。您不会直接与 Canvas 元素交互。

canvas loadFromJSON 和 toJSON 方法可用于克隆 Canvas 的副本(包括背景图像)。

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>