Category: JavaScript Answers

Sometimes, we want to access a JPEG’s EXIF rotation data on the client-side with JavaScript.

In this article, we’ll look at how to access a JPEG’s EXIF rotation data on the client-side with JavaScript.

Access JPEG EXIF Rotation Data in JavaScript on the Client-Side with JavaScript-Load-Image

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.

Conclusion

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

Sometimes, we want to add or update an element’s attribute with JavaScript.

In this article, we’ll look at how to add or update an element’s attribute with JavaScript.

Use the setAttribute Method

One way to add or update an attribute is to use the setAttribute method.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.setAttribute('style', 'color: red')

to set the text color of the div to red.

We call setAttribute with 'style' and 'color: red' to add the style attribute with the value in the 2nd argument.

Use Set the Property of the Element

We can also set the property with the attribute name to add an attribute.

For instance, we can write:

<div>  
  hello world  
</div>

And:

const d = document.querySelector('div');  
d.style = 'color: red'

Then we set the style attribute with the ‘color: red’ string.

Conclusion

One way to add or update an attribute is to use the setAttribute method.

Also, we can also set the property with the attribute name to add an attribute.

Sometimes, we want to check the HTML element’s CSS display property value with JavaScript.

In this article, we’ll look at how to check the HTML element’s CSS display property value with JavaScript.

Check the HTML Element’s CSS display Property Value with JavaScript

To check the HTML element’s CSS display property value with JavaScript, we can use the window.getComputedStyle method with the element we want to get the display property for.

We can also use the style.display property if the display CSS property value isn’t inherited from another location.

For instance, if we have the following HTML:

<div style='display: inline'>
  hello world
</div>

Then we can get the display property by writing:

const element = document.querySelector('div')
const {
  display
} = window.getComputedStyle(element, null);
console.log(display)

console.log(element.style.display);

First, we get the div with document.querySelector .

We call getComputedStyle with the element to get an object with the styles of element .

Then we get the display property from the returned object.

Also, we use the element.style.display property to get the display CSS property value.

Therefore, both console logs should log 'inline' .

Conclusion

To check the HTML element’s CSS display property value with JavaScript, we can use the window.getComputedStyle method with the element we want to get the display property for.

We can also use the style.display property if the display CSS property value isn’t inherited from another location.

Sometimes, we want to make TinyMCE paste in plain text by default with JavaScript.

In this article, we’ll look at how to make TinyMCE paste in plain text by default with JavaScript.

Make TinyMCE Paste in Plain Text by Default with JavaScript

To make TinyMCE paste in plain text by default, we can set the paste_as_text option to true .

For example, we can write the following HTML:

<script src="https://cdn.tiny.cloud/1/no-api-key/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

<textarea id="mytextarea">Hello, World!</textarea>

to add the TinyMCE script and a text area for the TinyMCE editor.

Then we can convert the text area to a TinyMCE editor with the following JavaScript code:

tinymce.init({
  selector: '#mytextarea',
  plugins: "paste",
  paste_as_text: true
});

We call the tinymce.init method with an object that has the selector , plugins , and paste_as_text properties.

selector is the selector of the text area to convert to a TinyMCE editor.

plugins is set to 'paste' to add the paste plugin to let us control pasting text.

And we set paste_as_text to true to make TinyMCE paste text as plain text.

Conclusion

To make TinyMCE paste in plain text by default, we can set the paste_as_text option to true .

Sometimes, we want to get the last item in a JavaScript object.

In this article, we’ll look at how to get the last item in a JavaScript object.

Get the Last Item in a JavaScript Object

To get the last item in a JavaScript object, we can use the Object.entries method to get the key-value pair arrays of an object in an array.

Therefore, we can use it to get the last item of the JavaScript object.

For instance, we can write:

const obj = {
  'a': 'apple',
  'b': 'banana',
  'c': 'carrot'
}
const entries = Object.entries(obj)
const [last] = entries.slice(-1)
console.log(last)

We have the obj object that we want to get the last property from.

Next, we call Object.entries with obj to get an array of key-value pair arrays of obj .

Then we call slice with -1 to return an array with the last entry of entries .

And we destructure that and assign it to last .

Therefore, last is:

["c", "carrot"]

Conclusion

To get the last item in a JavaScript object, we can use the Object.entries method to get the key-value pair arrays of an object in an array.

Therefore, we can use it to get the last item of the JavaScript object.