嗨朋友们我已经按照这个教程：http ://www.html5canvastutorials.com/labs/html5-canvas-drag-and-drop-resize-and-invert-images/
我创建了一个具有不同概念的相同程序（我使用了拖放功能，如果将图像拖放到画布上，它将在画布中绘制该图像）。但现在我无法使用 toDataURL 保存画布。请帮我..
<!DOCTYPE HTML>
<html>
<head>
<style>
body {
margin: 0px;
padding: 0px;
}
canvas {
border: 1px solid #9C9898;
}
#buttons {
position: absolute;
left: 10px;
top: 0px;
}
button {
margin-top: 10px;
display: block;
}
</style>
<div id="container"></div>
<script src="http://html5demos.com/h5utils.js"></script>
<script src="http://www.html5canvastutorials.com/libraries/kinetic-v3.9.6.js"></script>
<script>
function update(group, activeAnchor) {
var topLeft = group.get(".topLeft")[0];
var topRight = group.get(".topRight")[0];
var bottomRight = group.get(".bottomRight")[0];
var bottomLeft = group.get(".bottomLeft")[0];
var image = group.get(".image")[0];
// update anchor positions
switch (activeAnchor.getName()) {
case "topLeft":
topRight.attrs.y = activeAnchor.attrs.y;
bottomLeft.attrs.x = activeAnchor.attrs.x;
break;
case "topRight":
topLeft.attrs.y = activeAnchor.attrs.y;
bottomRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomRight":
bottomLeft.attrs.y = activeAnchor.attrs.y;
topRight.attrs.x = activeAnchor.attrs.x;
break;
case "bottomLeft":
bottomRight.attrs.y = activeAnchor.attrs.y;
topLeft.attrs.x = activeAnchor.attrs.x;
break;
}
image.setPosition(topLeft.attrs.x, topLeft.attrs.y);
image.setSize(topRight.attrs.x - topLeft.attrs.x, bottomLeft.attrs.y - topLeft.attrs.y);
}
function addAnchor(group, x, y, name) {
var stage = group.getStage();
var layer = group.getLayer();
var anchor = new Kinetic.Circle({
x: x,
y: y,
stroke: "#666",
fill: "#ddd",
strokeWidth: 2,
radius: 8,
name: name,
draggable: true
});
anchor.on("dragmove", function() {
update(group, this);
layer.draw();
});
anchor.on("mousedown touchstart", function() {
group.draggable(false);
this.moveToTop();
});
anchor.on("dragend", function() {
group.draggable(true);
layer.draw();
});
// add hover styling
anchor.on("mouseover", function() {
var layer = this.getLayer();
document.body.style.cursor = "pointer";
this.setStrokeWidth(4);
layer.draw();
});
anchor.on("mouseout", function() {
var layer = this.getLayer();
document.body.style.cursor = "default";
this.setStrokeWidth(2);
layer.draw();
});
group.add(anchor);
}
window.onload = function() {
var stage = new Kinetic.Stage({
container: "container",
width: 578,
height: 200,
});
var layer = new Kinetic.Layer();
var rect = new Kinetic.Rect({
x: 239,
y: 75,
width: 100,
height: 50,
fill: "#00D2FF",
stroke: "black",
strokeWidth: 4
});
function cancel(e) {
if (e.preventDefault) {
e.preventDefault();
}
return false;
}
var drop = document.querySelector('#container');
// Tells the browser that we *can* drop on this target
addEvent(drop, 'dragover', cancel);
addEvent(drop, 'dragenter', cancel);
addEvent(drop, 'drop', function (e) {
if (e.preventDefault) e.preventDefault(); // stops the browser from redirecting off to the text.
var path = e.dataTransfer.getData('Text')
loadImgs(stage,path);
});
// add the shape to the layer
layer.add(rect);
// add the layer to the stage
stage.add(layer);
document.getElementById("save").addEventListener("click", function() {
stage.toDataURL(function(dataUrl) {
window.open(dataUrl);
});
}, false);
};
function loadImgs(stage,url)
{
var yodaGroup = new Kinetic.Group({
x: 100,
y: 110,
draggable: true
});
var layer = new Kinetic.Layer();
layer.add(yodaGroup);
stage.add(layer);
var imageObj = new Image();
imageObj.onload = function() {
var image = new Kinetic.Image({
x: 0,
y: 0,
image: imageObj,
width: 93,
height: 104,
name : "image"
});
yodaGroup.add(image);
addAnchor(yodaGroup, 0, 0, "topLeft");
addAnchor(yodaGroup, 93, 0, "topRight");
addAnchor(yodaGroup, 93, 104, "bottomRight");
addAnchor(yodaGroup, 0, 104, "bottomLeft");
yodaGroup.on("dragstart", function() {
this.moveToTop();
});
stage.draw();
};
imageObj.src = url;
}
</script>
</head>
<body>
<img src="http://twitter.com/api/users/profile_image/rem" alt="Remy Sharp" />
<img src="http://twitter.com/api/users/profile_image/brucel" alt="Bruce Lawson" />
<img src="http://twitter.com/api/users/profile_image/Rich_Clark" alt="Rich Clark" />
<div id="buttons">
<button id="save">
Save as image
</button>
</body>
</html>