如何使用javascript清除并保存画布图像为图像

Question

我正在尝试使用kinetic-v4.7.2.min.js在画布上绘画。它在用户触摸该图层时成功绘制线条。我正在使用jsFiddle来实现此功能。 如何清除此矩形图层&如何将图层的容器保存为图像？

JSFiddle

// create a stage and a layer 
var stage = new Kinetic.Stage({ 
    container: 'container', 
    width: 350, 
    height: 350 
}); 
var layer = new Kinetic.Layer(); 
stage.add(layer); 

// an empty stage does not emit mouse-events 
// so fill the stage with a background rectangle 
// that can emit mouse-events 
var background = new Kinetic.Rect({ 
    x: 0, 
    y: 0, 
    width: stage.getWidth(), 
    height: stage.getHeight(), 
    fill: 'white', 
    stroke: 'black', 
    strokeWidth: 1, 
}) 
layer.add(background); 
layer.draw(); 

// a flag we use to see if we're dragging the mouse 
var isMouseDown = false; 
// a reference to the line we are currently drawing 
var newline; 
// a reference to the array of points making newline 
var points = []; 

// on the background 
// listen for mousedown, mouseup and mousemove events 
background.on('mousedown', function() { 
    onMousedown(); 
}); 
background.on('mouseup', function() { 
    onMouseup(); 
}); 
background.on('mousemove', function() { 
    onMousemove(); 
}); 

// On mousedown 
// Set the isMouseDown flag to true 
// Create a new line, 
// Clear the points array for new points 
// set newline reference to the newly created line 
function onMousedown(event) { 
    isMouseDown = true; 
    points = []; 
    points.push(stage.getMousePosition()); 
    var line = new Kinetic.Line({ 
     points: points, 
     stroke: "green", 
     strokeWidth: 5, 
     lineCap: 'round', 
     lineJoin: 'round' 
    }); 
    layer.add(line); 
    newline = line; 
} 

// on mouseup end the line by clearing the isMouseDown flag 
function onMouseup(event) { 
    isMouseDown = false; 
} 

// on mousemove 
// Add the current mouse position to the points[] array 
// Update newline to include all points in points[] 
// and redraw the layer 
function onMousemove(event) { 
    if (!isMouseDown) { 
     return; 
    }; 
    points.push(stage.getMousePosition()); 
    newline.setPoints(points); 
    // use layer.drawScene 
    // this is faster since the "hit" canvas is not refreshed 
    layer.drawScene(); 
} 

任何帮助，将不胜感激！

谢谢。

Answer 1

使用toDataURL()方法：

DEMO

$('button').on('click', function() { 
    var img = $('.kineticjs-content').find('canvas').get(0).toDataURL("image/png"); 

    $('body').prepend('<img src="' + img + '">'); 
});