Added example.

jsantell · Feb 16, 2012 · 68d6729 · 68d6729
1 parent b4fbf12
commit 68d6729
Show file tree

Hide file tree

Showing 4 changed files with 98 additions and 0 deletions.
diff --git a/examples/1_normal_a.jpg b/examples/1_normal_a.jpg
diff --git a/examples/1_normal_b.jpg b/examples/1_normal_b.jpg
diff --git a/examples/index.html b/examples/index.html
@@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>JS-ImageDiff Example</title>
+  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
+  <meta name="description" content="JavaScript imagediff utility using canvas for doing image diff in the browser." />
+  <script type="text/javascript" src="../imagediff.js"></script>
+  <link rel="stylesheet" href="styles.css" type="text/css" />
+</head>
+<body>
+  <div id="content">
+    <h1>JS-ImageDiff Example:</h1>
+    <p>See more examples at <a href="http://humblesoftware.github.com/js-imagediff/">humblesoftware.github.com/js-imagediff</a>.
+   Sample images from the <a href="https://github.com/cameronmcefee/Image-Diff-View-Modes/commit/8e95f70c9c47168305970e91021072673d7cdad8">github imagediff demo</a>.</p>
+    <div id="demo">
+      <img id="1-a" alt="example image one" src="1_normal_a.jpg" />
+      <img id="1-b" alt="example image two" src="1_normal_b.jpg" />
+    </div>
+    <script type="text/javascript">
+
+      //
+      // Example:
+      //
+
+      var
+        a = document.getElementById('1-a'),     // Original image
+        b = document.getElementById('1-b'),     // Altered image
+        demo = document.getElementById('demo'); // Container div
+
+      function difference () {
+
+        var
+          diff, canvas, context;
+
+        if (!a.complete || !b.complete) {
+
+          // Images are loaded asynchronously.
+          // Let's wait until they are ready.
+          setTimeout(difference, 10);
+
+        } else {
+
+          // Once they are ready, create a diff.
+          // This returns an ImageData object.
+          diff = imagediff.diff(a, b);
+
+          // Now create a canvas,
+          canvas = imagediff.createCanvas(diff.width, diff.height);
+
+          // get its context
+          context = canvas.getContext('2d');
+
+          // and finally draw the ImageData diff.
+          context.putImageData(diff, 0, 0);
+
+          // Add the canvas element to the container.
+          demo.appendChild(canvas);
+        }
+      }
+
+      difference();
+    </script>
+  </div>
+  <div id="github-ribbon">
+    <a href="http://github.com/HumbleSoftware/js-imagediff"><img style="position: absolute; top: 0; right: 0; border: 0;" src="https://d3nwyuy0nl342s.cloudfront.net/img/71eeaab9d563c2b3c590319b398dd35683265e85/687474703a2f2f73332e616d617a6f6e6177732e636f6d2f6769746875622f726962626f6e732f666f726b6d655f72696768745f677261795f3664366436642e706e67" alt="Fork me on GitHub"/></a>
+  </div>
+</body>
+</html>
+
diff --git a/examples/styles.css b/examples/styles.css
@@ -0,0 +1,29 @@
+/* Demo */
+body {
+  font-family: "Droid Sans",sans-serif;
+}
+body,
+a,
+a:visited {
+  color: #333;
+}
+h1 {
+  text-align: center;
+  margin: 40px 0px;
+  font-size: 36px;
+  text-shadow: 2px 2px 0 #CCC;
+}
+p {
+  text-align: center;
+}
+ul {
+  list-style: none;
+}
+div#content {
+  margin: 0px auto;
+  width: 930px;
+}
+div.footer {
+  margin-top: 50px;
+  text-align: right;
+}