JSFiddle - React, Tailwind, and code Playground

by aginsburg

HTML

<script src="http://cdn.jsdelivr.net/load-image/1.11.1/js/load-image.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<head lang="en">
  
    
    <title></title>
</head>
<body>

</body>

JavaScript

var xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://www.filepicker.io/api/file/U0D9Nb9gThy0fFbkrLJP', true);
    xhr.responseType = 'blob';

    xhr.onload = function(e) {
        if (this.status == 200) {
            // Note: .response instead of .responseText
            console.log ("got image");
            var blob = new Blob([this.response], {type: 'image/png'});
            console.log("about to parse blob:" + _.pairs(this.response));
            loadImage.parseMetaData(blob, function (data) {
                console.log("EXIF:" + _.pairs(data))
                var ori ="initial";
                if (data.exif) {
                    ori = data.exif.get('Orientation');

                }
                console.log("ori is:" + ori);
            });

            var loadingImage = loadImage(
                blob,
                function (img) {
                    console.log("in loadingImage");
                    document.body.appendChild(img);
                },
                {maxWidth: 600,
                orientation: 3,
                canvas: true,
                crossOrigin:'anonymous'
                }
            );
            if (!loadingImage) {
                // Alternative code ...
            }


        }
    };
    xhr.send();