added example html file

zfedoran · Dec 29, 2017 · 4b53739 · 4b53739
1 parent caa12dd
commit 4b53739
Showing 1 changed file with 111 additions and 0 deletions.
diff --git a/examples/basic.html b/examples/basic.html
@@ -0,0 +1,111 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>dcraw.js basic example</title>
+
+    <script src="https://cdn.jsdelivr.net/npm/dcraw"></script>
+
+    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
+    <link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
+    <script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
+
+    <style>
+        .drop-area {
+            border: 2px dashed #bbb;
+            border-radius: 5px;
+            padding: 25px;
+            text-align: center;
+            color: #bbb;
+            margin: 20px;
+        }
+
+        .thumbnail {
+            max-width: 100%;
+        }
+    </style>
+</head>
+<body>
+
+    <div class="drop-area" id="drop">
+        <h5>Drop RAW files here</h5>
+        <input type="file" id="files" name="files[]" multiple />
+    </div>
+
+    <div id="list" class="mdl-grid"></div>
+
+    <script>
+        function handleFileSelect(evt) {
+            evt.stopPropagation();
+            evt.preventDefault();
+
+            try {
+                var files = evt.dataTransfer.files;
+            } catch (e) {
+                var files = evt.target.files;
+            }
+
+            var output = [];
+            for (var i = 0, f; f = files[i]; i++) {
+                var reader = new FileReader();
+
+                reader.onload = (function (o) {
+                    return function (e) {
+                        // Get the image file as a buffer
+                        var buf = new Uint8Array(e.currentTarget.result);
+
+                        // Get the RAW metadata
+                        var metadata = dcraw(buf, { verbose: true, identify: true }).split('\n').filter(String);
+
+                        // Create the display elements
+                        var id = btoa(o.name).replace(/=/g, '');
+                        var elem = `
+                            <div class="mdl-cell mdl-cell--4-col mdl-card mdl-shadow--2dp">
+                                <div class="mdl-card__title mdl-card--expand">
+                                <h2 class="mdl-card__title-text">${o.name}</h2>
+                                </div>
+                                <div class="mdl-card__media">
+                                    <img class="thumbnail" id="${'thumb-' + id}">
+                                </div>
+                                <div class="mdl-card__supporting-text">
+                                <ul><li>${metadata.join('</li><li>')}</li></ul>
+                                </div>
+                            </div>
+                            `;
+
+                        document.getElementById('list').innerHTML += elem;
+
+                        // Extract the thumbnail
+                        var thumbnail = dcraw(buf, { extractThumbnail: true });
+
+                        // Create thumbnail
+                        var blob = new Blob([thumbnail], { type: "image/jpeg" });
+                        var urlCreator = window.URL || window.webkitURL;
+                        var imageUrl = urlCreator.createObjectURL(blob);
+                        var img = document.querySelector("#thumb-" + id);
+                        img.src = imageUrl;
+                    };
+                })(f);
+
+                reader.readAsArrayBuffer(f);
+            }
+        }
+
+        function handleDragOver(evt) {
+            evt.stopPropagation();
+            evt.preventDefault();
+            evt.dataTransfer.dropEffect = 'copy';
+        }
+
+        // Setup listeners.
+        var dropZone = document.getElementById('drop');
+        dropZone.addEventListener('dragover', handleDragOver, false);
+        dropZone.addEventListener('drop', handleFileSelect, false);
+
+        var fileInput = document.getElementById('files');
+        fileInput.addEventListener('change', handleFileSelect, false);
+    </script>
+</body>
+</html>