js URL-адрес предварительного просмотра видео изображения createObjectURL()

JavaScript
js URL-адрес предварительного просмотра видео изображения createObjectURL()

Многие бизнес-сценарии должны обрабатывать загрузку изображений/видео и в то же время требуют возможности быстрого предварительного просмотра эффекта, чтобы избежать увеличения изображения или видео или медленного ответа на запрос, используйтеcreateObjectURL()Локальный предварительный просмотр более практичен.

1. Что такое URL.createObjectURL()

URL.createObjectURL()Статический метод создаетDOMString, который содержит URL-адрес, представляющий объект, указанный в параметре. время жизни этого URL и окно, в котором он был созданdocumentсвязывать. Этот новый объект URL представляет указанныйFileОбъект илиBlobобъект.

Источник: МДН

Простое понимание состоит в том, чтобы положитьfileилиBlobобъект типа дляUTF-16строку и сохранить ее в текущей операцииdocumentВниз.

Расширение 1: UTF-8а такжеUTF-16а такжеGBKКакая разница, обе кодирование переменной длины через паруUnicodeПосле преобразования значения кода в соответствующее правило кодировка сохраняется в памяти/файле.

Это отдельная история в деталях, не обращайте внимания на детали.

2. Какая польза от URL.createObjectURL()

Конечно, это функция предварительного просмотра этой темы.

и т.п. для предварительного просмотраFileReader.readAsDataURL(file)Переменаbase64Возьми.

Хорошо, следующая тема.

3. URL.createObjectURL() и FileReader.readAsDataURL()

если бы вы использовалиFileReader.readAsDataURL(file)метод, то вы можете прочитать аналогию ниже, чтобы сравнить преимущества и недостатки двух.

  1. возвращаемое значение

    • FileReader.readAsDataURL(file)может получитьbase64Нить.
    • URL.createObjectURL(file)Вы можете получить один из текущих файлов内存URL.

  2. использование памяти

    • FileReader.readAsDataURL(file)Возвращаемое значение представляет собой преобразованный сверхдлинныйbase64Строка (длина положительно связана с размером анализируемого файла).
    • URL.createObjectURL(file)Хотя возвращаемое значение является строкой, этоurlадрес.

  3. очистка памяти

    • FileReader.readAsDataURL(file)Автоматически очищать память в соответствии с механизмом сборки мусора JS.
    • URL.createObjectURL(file)существует в настоящее времяdoucmentвнутри, чистый метод толькоunload()событие илиrevokeObjectURL()Вручную очистить.

  4. исполнительный механизм

    • FileReader.readAsDataURL(file)Возвращается в виде обратного вызова, выполняемого асинхронно.
    • URL.createObjectURL(file)Возврат напрямую и выполнение синхронно.

  5. совместимость

    • СовместимостьIE10Все остальные браузеры поддерживают вышеуказанное.

  6. разное

    • FileReader.readAsDataURL(file)Когда несколько файлов обрабатываются одновременно, каждый файл должен соответствовать новомуFileReaderобъект.

      FileReader_error.png

    • URL.createObjectURL(file)Возврат по очереди не имеет никакого эффекта.

В основном

URL.createObjectURL(file)получить локальный контейнер памятиURLАдрес, удобный для предварительного просмотра, многократное использование требует внимания к проблеме ручного освобождения памяти, отличной производительности.FileReader.readAsDataURL(file)выиграть непосредственно вbase64Формат, который можно напрямую использовать в бизнесе без необходимости вторичного преобразования формата.

Об использованииcanvasПроблема перехвата первого кадра видео снова появится в следующей статье.

Приложение 1: Base64 для BLOB-объектов

function dataURLtoBlob(dataurl) {
    var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
        bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
    while (n--) {
        u8arr[n] = bstr.charCodeAt(n);
    }
    return new Blob([u8arr], { type: mime });
}
Категории