Basic dcraw.js Example

Get camera metadata and thumbnail image from RAW file

by zfedoran

HTML

<script src="https://fonts.googleapis.com/icon?family=Material+Icons"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-pink.min.css">
<script src="https://code.getmdl.io/1.3.0/material.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/dcraw"></script>

<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>

CSS

.drop-area {
  border: 2px dashed #bbb;
  border-radius: 5px;
  padding: 25px;
  text-align: center;
  color: #bbb;
  margin: 20px;
}

.thumbnail {
  max-width: 100%;
}

JavaScript

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);

       ...