FileAPI library exif read

by RomainMazB

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/FileAPI.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/plugins/FileAPI.exif.js"></script>
<div class="js-fileapi-wrapper upload-btn">
  <div class="upload-btn__txt">Choose files</div>
  <input id="choose" name="files" type="file" multiple />
</div>
<div id="images"><!-- previews --></div>
<button id="rotate">Rotate</button>

JavaScript

var choose = document.getElementById('choose'),
		button_rotate = document.getElementById("rotate"),
		files = [];
		FileAPI.event.on(choose, 'change', function (evt){
			files = FileAPI.getFiles(evt); // Retrieve file list
			FileAPI.filterFiles(files, function (file, info/**Object*/){
				if( /^image/.test(file.type) ){
					return	info.width >= 320 && info.height >= 240;
				}
				return	false;
			}, function (files/**Array*/, rejected/**Array*/){
				if( files.length ){
					// Make preview 100x100
					FileAPI.each(files, function (file){
						FileAPI.Image(file).preview(100).get(function (err, img){
							images.appendChild(img);
						});
					});
				}
			});
		});

button_rotate.onclick = () => { // Rotate canvas which is not displayed in DOM
  let div = document.createElement("div"); // Create an undisplayed DOM element
  
	files.forEach((file) => {
  	FileAPI.Image(file).get(function (err/**String*/, image/**HTMLElement*/){
    	div.appendChild(image);
      if( !err ){
        Caman(image, function () {
          FileAPI.getInfo(file, (err/**String*/, info/**Object*/) => {
            if( !err ){
              if( info.exif.Orientation === 6 ) {
          			this.rotate(90); // Reverse image
              }
            }
          });
          this.resize({width: 300, height: 500});
          this.render(function() {
            var link = document.createElement('a');
            link.setAttribute('href', this.toBase64());
            link.setAttribute('download', 'Filename.jpg');
            link.setAttribute('target', '_blank');
            link.style.display = 'none';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
          });
        });
      }
    });    
  });
}