HTML5图像上传，裁剪和保存

Question

我刚刚从这里开始学习教程：https://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/，它在另一个stackoverflow帖子中引用，建议初学者使用。

到目前为止，我已经构建了代码并在test.php中对其进行了测试，但它似乎不起作用（对我来说）。上传图片后，没有任何反应。我已经一遍又一遍地浏览了网站上的代码，但是我的知识限制了我找到​​错误的能力。

我的test.php：

...
<form action="" method="post" enctype="multipart/form-data">
<input type="file" multiple>
</form>

<script>
// from an input element
var filesToUpload = input.file;

var img = document.createElement("img");
img.src = window.URL.createObjectURL(file);

var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0);

var MAX_WIDTH = 200;
var MAX_HEIGHT = 260;
var width = img.width;
var height = img.height;

if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(img, 0, 0, width, height);

var imgData = ctx.getImageData(x, y, width, height);
var data = imgData.data;
var pixels = ctx.getImageData(0, 0, width, height);
for (var i = 0, ii = pixels.data.length; i < ii; i += 4) {
var r = pixels.data[i + 0];
var g =pixels.data[i + 1];
var b = this.pixels.data[i + 2];
data[i + 0] = (r * .393) + (g *.769) + (b * .189);
data[i + 1] = (r * .349) + (g *.686) + (b * .168)
data[i + 2] = (r * .272) + (g *.534) + (b * .131)
data[i + 3] = 255;
}
ctx.putImageData(imgData, 0, 0);

var dataurl = canvas.toDataURL("image/png");

</script>

...