Skip to content
Browse files

Added an image drawing example that uses local files

  • Loading branch information...
1 parent ba33cc3 commit 1bb6b00c44787dd102f5a7c419bc4eaf969e7822 @jbuck jbuck committed Nov 11, 2011
Showing with 72 additions and 0 deletions.
  1. +54 −0 examples/localfiles/test.html
  2. +18 −0 examples/localfiles/test.pde
View
54 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>
View
18 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 1bb6b00

Please sign in to comment.
Something went wrong with that request. Please try again.