Category: JavaScript Answers

We can use the JavaScript-Load-Image library to load EXIF metadata from an image.

To use it, we write:

<script src="https://cdnjs.cloudflare.com/ajax/libs/blueimp-load-image/2.18.0/load-image.all.min.js"></script>

<input type='file'>

We add the load-image.all.min.js script to add the metadata parser with the core library.

Then to parse the EXIF metadata, we write:

const input = document.querySelector('input')
input.addEventListener('change', (e) => {
  const [file] = [...e.target.files]
  loadImage.parseMetaData(
    file,
    (data) => {
      console.log(data.exif)
    }, {
      includeExifTags: {
        0x0112: true,
        ifd1: {
          0x0201: true,
          0x0202: true
        },
        0x8769: {
          0x9000: true
        }
      }
    }
  )
})

We get the file from the input and assign it to the file object.

Then we call the loadImage.parseMetaData to parse the EXIF metadata from the image.

Next, we pass in the file object and the callback with the data which has the data.exif property which has the EXIF metadata in an object.

The 3rd argument is an object with the EXIF tags we want to get.

They include 0x0112 for orientation, 0x0201 for thumbnail data offset, 0x0202 for data length, 0x8769 for EXIF pointer, and 0x9000 for EXIF version.

Now when we select an image file, we should see the EXIF data loaded.

We can use the jQuery fadeOut method to hide a div.

And we can combine that with setTimeout to delay the execution of fadeOut .

If we have the following HTML:

<div id='mydiv'>  
  hello world  
</div>

Then we can call fadeOut by writing:

setTimeout(() => {  
  $('#mydiv').fadeOut('fast');  
}, 1000);

We call fadeOut in the setTimeout callback with a delay of 1000 milliseconds.

And now we should see the div fade away after 1 second.

We can create a function that returns a promise that calls setTimeout so that we can use setTimeout in a promise chain.

For instance, we can write:

const delay = (t, v) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(v), t)
  });
}

(async () => {
  const one = await Promise.resolve(1)
  console.log(one)
  const two = await delay(1000, 2)
  console.log(two)
  const three = await Promise.resolve(3)
  console.log(three)
})()

to create the delay function that returns a promise by creating one with the Promise constructor.

We pass in a callback that calls setTimeout , which calls resolve with v and delays the execution of the callback by t milliseconds.

Then we use delay in an async function with other promises.

Now we should see a delay when we’re calling delay .

And 1, 2, and 3 are logged in the console log.

We can use commas to separate different kinds of elements we want to select.

For instance, if we have the following HTML:

<form>
</form>
<p>
</p>
<legend>
</legend>

Then we can select all the elements by writing:

const list = document.querySelectorAll("form, p, legend");
console.log(list)

list would have all the elements in the HTML in the list.

Each item separated by a comma is its own CSS selector.

We can use the Object.values method to return an array of property values of an object.

Therefore, we can use that to check if a value exists in an object.

To do this, we write:

const obj = {
  a: 'test1',
  b: 'test2'
};
if (Object.values(obj).indexOf('test1') > -1) {
  console.log('has test1');
}

We call indexOf on the array of property values that are returned by Object.values .

Since 'test1' is one of the values in obj , the console log should run.

Use the Object.keys Method

We can also use the Object.keys method to do the same check.

For instance, we can write:

const obj = {
  a: 'test1',
  b: 'test2'
};
const exists = Object.keys(obj).some((k) => {
  return obj[k] === "test1";
});
console.log(exists)

We call Object.keys to get an array of property keys in obj .

Then we call some with callback to return if obj[k] is 'test1' .

Since the value is in obj , exists should be true .