Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Merge pull request processing-js#10 from jbuck/localfiles
Added an image drawing example that uses local files
  • Loading branch information
jbuck committed Nov 11, 2011
2 parents 97b715c + 1bb6b00 commit 196517d
Show file tree
Hide file tree
Showing 2 changed files with 72 additions and 0 deletions.
54 changes: 54 additions & 0 deletions examples/localfiles/test.html
@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html>
<head>
<title>Processing.js Example Page</title>
<meta charset="UTF-8">
<script type="text/javascript" src="../../processing.js"></script>
<script>
function handleFile(e) {
var reader = new FileReader;

e.stopPropagation();
e.preventDefault();

reader.onload = function(event) {
var img = new Image;
img.src = event.target.result;
img.onload = function() {
var p = Processing.instances[0];
p.drawImage(img);
}
}

// target for input, dataTrasfer for drop
var file = e.target.files ? e.target.files[0] : e.dataTransfer.files[0];

reader.readAsDataURL(file);
}

function clearScreen() {
var p = Processing.instances[0];
p.clearScreen();
}

function handleDragOver(evt) {
evt.stopPropagation();
evt.preventDefault();
}

document.addEventListener("DOMContentLoaded", function() {
document.getElementById('file').addEventListener('change', handleFile);

var dropZone = document.getElementById('test');
dropZone.addEventListener('dragover', handleDragOver, false);
dropZone.addEventListener('drop', handleFile, false);
}, false);
</script>
</head>
<body>
<canvas id="test" data-processing-sources="test.pde" style="border: 1px solid black;"></canvas>
<br />
<input type="file" id="file" name="file" />
<input type="button" onClick="javascript:clearScreen()" value="Clear sketch" />
</body>
</html>
18 changes: 18 additions & 0 deletions examples/localfiles/test.pde
@@ -0,0 +1,18 @@
void setup() {
size(500, 500);
noLoop();
clearScreen();
}

void clearScreen() {
background(204);
textSize(68);
textAlign(CENTER, CENTER);
text("Select an image\nbelow or drag\nand drop an\nimage on\nthe sketch", width/2, height/2);
}

void drawImage(Image orig) {
background(255);
PImage pi = new PImage(orig);
image(pi);
}

0 comments on commit 196517d

Please sign in to comment.