Юный герой, стой на месте, превью картинки

внешний интерфейс JavaScript React.js
Юный герой, стой на месте, превью картинки

Молодой человек, я вижу, что у вас изящный костяк, и вы непревзойденный вундеркинд в боевых искусствах.

поток изображений

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

Сначала кратко расскажем о нескольких способах загрузки файлов, а затем реализуем их по очереди

Способ загрузки

input

По клику пользователя создать<input type="file" accept="image/*"/>, и мониторchangeСобытие получает файловый объект, который примерно выглядит следующим образом

click = () => {
    let input = document.createElement('input')
    input.setAttribute('type', 'file')
    input.setAttribute('accept', 'image/*')
    
    input.onchange = event => {
        let file = event.target.files[0]
    }
    
    input.click()
    
}

Drag && drop

Используйте API перетаскивания HTML5 для мониторинга элементов.dropсобытие, то же самое, чтобы получить файловый объект

Создадим объект DataTransfer, с ним мы встретимся ниже, о нем поговорим позже

dragover = event => {
   event.preventDefault()
}

drop = event => {
    event.preventDefault()
    let files =  event.dataTransfer.files
}

paste

Привязка событий вставки к элементам благодаряcontenteditableМы можем добавить ко всем элементам звук все тот же, и получить файл, содержащийся в событии

paste = (e) => {
    e.preventDefault()
    let file = e.clipboardData.files[0]
}

clipboardData

Событие вставки обеспечиваетclipboardDataсобственность, представляет собойDataTransferТип объекта, как мы говорили ранее, перетаскивание создастDataTransferОбъект, да, паста тоже это.

Давай, подними ей хиджаб.

Как видно выше,clipboardDataИмеет следующие свойства

  • dropEffect по умолчанию использует node
  • effectAllowed по умолчанию не инициализирован
  • файлы локальный список файлов
  • items Данные в буфере обмена
  • типы Каждый тип данных в буфере обмена

Нам нужно использовать только файлы, файл изображения находится в нем

формат файла

file

Как правило, объекты File извлекаются от пользователя в<input>Возвращается после выбора файла на элементеFileListОбъекты, которые также могут быть созданы с помощью операций перетаскивания.DataTransferобъект, унаследованный отBlob

Истинное лицо горы Лу, Нуо, таково.

Вы можете увидеть следующие свойства:

  • name: имя файла, это свойство доступно только для чтения.
  • size: размер файла в байтах, это свойство доступно только для чтения.
  • тип: MIME-тип файла или пустая строка, если тип невозможно различить, этот атрибут доступен только для чтения.
  • lastModified: время последней модификации файла в формате метки времени.
  • lastModifiedDate: время последней модификации файла в формате экземпляра объекта Date.

Мы не углубляемся в файловый объект, просто знаем, что он может обращаться к локальным файлам.

blob

Объект Blob представляет собой неизменяемый объект, подобный файлу необработанных данных. Данные, представленные большим двоичным объектом, не обязательно являются собственным форматом JavaScript. Интерфейс File основан на Blob, наследуя функциональные возможности BLOB-объектов и расширяя их для поддержки файлов в системе пользователя.

Создать объект большого двоичного объекта

var aBlob = new Blob( array, options );

  • array — это массив объектов, таких как ArrayBuffer, ArrayBufferView, Blob, DOMString и т. д., или смесь других подобных объектов, которые будут помещены в Blob.

  • options — это необязательный знакомый словарь BLOB-объектов, он может указывать следующие два свойства.

    • type, значением по умолчанию является "", которое представляет тип MIME содержимого массива, которое будет помещено в большой двоичный объект.

    • окончаний значение по умолчанию — «прозрачный», что указывает на то, как выводятся строки, содержащие окончания строк \n.

var a = ["hello", "world"];
var myBlob = new Blob(a, { "type" : "text/xml" });
console.log(myBlob);

Динамически создавая большие двоичные объекты, мы можем добиться чистых внешних загрузок.

const foo = {hello: "world"};
const blob = new Blob([JSON.stringify(foo)], {type: "text/plain"});
const fileName = `${Date.now()}.doc`;
const link = document.createElement('a');
link.href = URL.createObjectURL(blob);
link.download = fileName;
link.click();
URL.revokeObjectURL(link.href);

Blob URL

URL-адрес большого двоичного объекта — это URL-адрес протокола большого двоичного объекта в следующем формате.

blob:http://localhost:1234/946644c4-ca98-405e-918c-759e790d0330

Доступ к URL-адресам BLOB-объектов можно получить черезURL.createObjectURL(blob)Create, новый объект URL создается каждый раз, когда вызывается метод createObjectURL(), даже если вы уже создали его с тем же объектом в качестве параметра.

Когда эти объекты URL не нужны, передайтеURL.revokeObjectURL(objectURL)бесплатный объект URL

Чтобы отображать локальные изображения с использованием URL-адресов BLOB-объектов, нам нужно только назначить созданный URL-адрес атрибуту src для img.

FileReader

FileReader используется для чтения файлов или файлов BLOB-объектов. В зависимости от размера файлов процесс чтения является асинхронным.

let render = new FileReader()
render.onload = () => {
    let src = render.result
}
render.readAsDataURL(file)

FileReader метод чтения файла

  • Файл readAsBinaryString читает файл как двоичную кодировку

  • Файл readAsBinaryArray читает файл как двоичный массив

  • readAsText файл[ кодировка] читает файл как текст в соответствии с форматом, кодирует по умолчанию в UTF-8

  • Файл readAsDataURL читать файл как DataUrl

base64

Используйте FileReader для чтения файла, вы можете прочитать изображение в формате base64.

непосредственно в экземпляре FileReaderonloadВ функции присвойте результат src.

разница в формате

На самом деле в основном есть два формата base64 и blob, отличия между ними следующие

  • URL-адреса больших двоичных объектов обычно короче.

  • URL-адрес BLOB-объекта может легко использовать XMLHttpRequest для получения исходных данных, base64 поддерживается не всеми браузерами.

  • URL-адреса BLOB-объектов можно использовать только внутри текущего приложения.

Преобразование между форматами

холст для объекта blob

canvas.toBlob(function (blobObj) {
	console.log(blobObj)
})

холст в base64

let imgSrc = canvas.toDataURL('image/png')

base64 в блоб

function dataURLtoBlob(dataurl) {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new Blob([u8arr], { type: mime });
}

Ссылаться на

Внешний интерфейс использует объект Blob для создания указанного файла и его загрузки.

Преобразование между DataURL и файлом, большим двоичным объектом, объектами холста

конец

Полный текст кода, пожалуйста, ткнитеgithub

Всем хороших выходных.

Категории