Определите в браузере, имеет ли загруженное изображение правильный формат

Question

У меня есть изображение file.svg, и я переименовал его в file.jpg

Теперь открытие этого jpg-файла в браузере определенно не приведет к предварительному просмотру моего изображения. Итак, я пытаюсь определить, действительно ли изображение jpg, загруженное через форму ввода, является jpg в браузере.

Я попытался прочитать файл как base64, но ничего не нашел. Есть способ определить, усечено ли изображение jpg или нет. Вот ссылка на эту статью. js проверьте, не усечены ли / не повреждены ли данные изображения

Как я могу определить, имеет ли изображение правильный тип, как и расширение?

Answer 1

Найти тип пантомимы, просто посмотрев имя файла, небезопасно. Вы должны найти точный mime-тип файла, прочитав байты подписи, которые помещены в начало содержимого файла.

С помощью этого списка вы можете найти пары подписи-mime-типа.

Я написал образец кода ниже, где вы можете проверить, является ли выбранный файл допустимым файлом jpeg или нет. JPEG имеет простую подпись, если первые 2 байта файла - это 0xFF и 0xD8, вы можете сказать, что этот файл является файлом jpeg. (пожалуйста, проверьте список для более полной информации о подписи).

document.querySelector('input').addEventListener('change', function() 
{
	var reader = new FileReader();
	reader.onload = function()
	{
		var bytes = new Uint8Array(this.result);
		if ((bytes[0] == 0xFF) && (bytes[1] == 0xD8))
			console.log("this is a valid jpeg file");
		else
			console.log("this does not look like a jpeg file");
	}
	reader.readAsArrayBuffer(this.files[0]);
});

<input type="file">

Answer 2

Как упоминал Альпер Чинар, чтение расширения небезопасно, и как мы можем читать начальные байты для определения типов mime. Я хотел бы добавить небольшой фрагмент кода для определения не только mime-типа jpg, но также для gif и pngs

      const blob = files[0];
      const fileReader = new FileReader();
      fileReader.readAsArrayBuffer(blob);
      fileReader.onloadend = (e) => {
        const arr = (new Uint8Array(<any>e.target.result)).subarray(0, 4);
        let header = '';
        for (let i = 0; i < arr.length; i++) {
          header += arr[i].toString(16);
        }
        console.log(header);
        let type: any;
        switch (header) {
          case '89504e47':
            type = 'image/png';
            break;
          case '47494638':
            type = 'image/gif';
            break;
          case 'ffd8ffe0':
          case 'ffd8ffe1':
          case 'ffd8ffe2':
          case 'ffd8ffe3':
          case 'ffd8ffe8':
            type = 'image/jpeg';
            break;
          default:
            type = 'unknown';
            break;
        }
        console.log(type);

      };

Подробная информация Как проверить тип MIME файла с помощью javascript перед загрузкой ?

Answer 3

Добавьте обработчик события onChange на входе следующим образом:

<input type="file" id="file_uploader" />

Затем в javascript добавьте обработчик событий, который будет отслеживать изменения на этом входе:

const file_input = document.getElementById(("file_uploader")

file_input.addEventListener("change", handleChange)

Это автоматически передается в event в handleChange, поэтому вы можете ссылаться на это:

const handleChange = e => {
    const name = e.targe.file[0].name
    // name = filename.extnesion
    const extension = name.split(".")[1]
}

Метод разделения даст массив из 2 строк - строку перед . - filename и строка после . - расширение.