I am trying to determine the file type of an image using JavaScript, but the code I have tried is displaying the file type as ‘jpg’. However, when I pass the same file to an external tool like https://exifinfo.org/detail/RjmJqqj8LGEaqOLBEaiyiw, it displays the file type as ‘webp’, which is the correct file type.
This is the code:
<!DOCTYPE html>
<html>
<head>
<title>Identify Image File Type</title>
</head>
<body>
<img id="image" src="https://s.alicdn.com/@sc04/kf/H7c1b38f112d044889f7b2c5a2ab914ac3.jpg_100x100xz.jpg">
<script>
const image = document.getElementById('image');
image.addEventListener('load', () => {
const width = image.naturalWidth;
const height = image.naturalHeight;
const url = new URL(image.src);
const extension = url.pathname.split('.').pop();
console.log(`The file type is ${extension}`);
});
image.addEventListener('error', () => {
console.log('The file is not a valid image');
});
</script>
</body>
</html>
I tried using a third-party library, ‘file-type’ to determine correct file type. Here is the code I tried:
<!DOCTYPE html>
<html>
<head>
<title>Identify Image File Type</title>
</head>
<body>
<img id="image">
<script src="https://cdn.jsdelivr.net/npm/file-type/dist/index.umd.js"></script>
<script>
const imageUrl = 'https://s.alicdn.com/@sc04/kf/H7c1b38f112d044889f7b2c5a2ab914ac3.jpg_100x100xz.jpg';
fetch(imageUrl)
.then(response => response.arrayBuffer())
.then(buffer => {
const fileType = window.fileType.fromBuffer(new Uint8Array(buffer));
const image = document.getElementById('image');
image.addEventListener('load', () => {
const width = image.naturalWidth;
const height = image.naturalHeight;
console.log(`The file type is ${fileType.ext}`);
});
image.addEventListener('error', () => {
console.log('The file is not a valid image');
});
const objectUrl = window.URL.createObjectURL(new Blob([buffer], { type: fileType.mime }));
image.src = objectUrl;
})
.catch(error => {
console.log(`Error fetching image: ${error.message}`);
});
</script>
</body
But it gives error:
GET https://cdn.jsdelivr.net/npm/file-type/dist/index.umd.js net::ERR_ABORTED 404
Error fetching image: Cannot read properties of undefined (reading ‘fromBuffer’)
Can someone please guide me on how to correctly determine the file type of an image in JavaScript? The ideal output for the image in question should be ‘webp’.”