Преобразование между base64 и файловыми объектами

внешний интерфейс

Предисловие:

В недавнем проекте файл изображения, полученный с устройства, имеет формат base64, и его необходимо преобразовать в файловый объект, а затем добавить информацию о токене в заголовке запроса к серверной части, Base64 преобразуется в метод файлового объекта. учиться.

Преобразование base64 в файловый объект

 /**
 * @desc 将base64转换为文件对象
 */
dataURLtoFile(dataurl) {
  const arr = `data:image/png;base64,${dataurl}`.split(',')
  const mime = arr[0].match(/:(.*?);/)[1]
  const bstr = atob(arr[1])
  let n = bstr.length
  const u8arr = new Uint8Array(n)
  while (n--) {
    u8arr[n] = bstr.charCodeAt(n)
  }
  let blob = new File([u8arr], 'file', { type: mime })
  const params = new FormData()
  params.append('file', blob)
  return params
}

Dataurl — это полученная кодировка base64, которая через dataURLtoFile преобразуется в файловый объект, а затем добавляется необходимая информация в заголовок запроса и передается на бэкэнд. Этот метод относится к Интернету, и он используется только на начальном этапе.Ниже мы объясним подробное выполнение этого метода шаг за шагом.

Реализация

Давайте пошагово рассмотрим, как реализовать этот метод.

stpe1: декодировать двоичный файл, закодированный с помощью base64

 const arr = `data:image/png;base64,${dataurl}`.split(',')

Это вводит кодировку base64, которую необходимо преобразовать, и определяет формат файла, arr[0] — `data:image/png;’, arr[1] — ${dataurl}

const mime = arr[0].match(/:(.*?);/)[1]

mime - это файловый объект, с помощью метода match получить 'image/png' в папке arr[0]

const bstr = atob(arr[1])

arr[1] — полученная кодировка base64, в ней есть странная функция atob(), здесь нужно понимать функцию atob() и функцию btoa() в js — две концепции кодирования и декодирования Base64,

atob() //ASCII to Base64

btoa() //Base64 to ASCII

Функция atob() способна декодировать строковые данные в кодировке base-64. И наоборот, функция btoa() может создать строку ASCII в кодировке base-64 из «строки» двоичных данных.

// Код ASCII использует указанную комбинацию 7-битных или 8-битных двоичных чисел для представления 128 или 256 возможных символов. Стандартный ASCII, также называемый Basic ASCII, использует 7 двоичных цифр (оставшийся 1 двоичный 0 равен 0) для представления всех прописных и строчных букв, цифр от 0 до 9, пунктуации и специальных элементов управления, используемых в символах американского английского.

// Base64 — это представление двоичных данных, основанное на 64 печатных символах. Поскольку 2^6=64, каждые 6 бит являются единицей, соответствующей определенному печатному символу. 3 байта имеют 24 бита, соответствующие 4 единицам Base64, то есть 3 байта могут представлять 4 печатных символа. Его можно использовать как кодировку передачи для электронной почты. Печатные символы в Base64 включают буквы A-Z, a-z, цифры 0-9, так что всего 62 символа, и два печатных символа различаются в разных системах. По мере увеличения размера кодировки каждая цифра base64 явно представляет 6-битные данные, поэтому 3 8-битных символа или двоичный ввод могут быть представлены 4 6-битными цифрами base64, 4×6 = 3×8, что представляет кодировку Base64. максимальный размер строки или файла составляет 133% от исходного.Если закодированные данные очень маленькие, то это соотношение будет очень большим.Например, длина строки "а" равна 1, а длина после кодирования равна 4. "YQ=="

Основное использование

    let encodeData = window.btoa('Hello,File') // 编码
    let decodeData = window.atob(encodeData) // 解码
    >encodeData 'SGVsbG8sRmlsZQ=='
    >decodeData 'Hello,File'

stpe2: преобразовать кодировку в кодировку Unicode

let n = bstr.length
const u8arr = new Uint8Array(n)

n — длина декодированной строки, а затем создайте массив целых чисел без знака u8arr, который инициализируется значением 0 и содержит n элементов.

Тип массива Uint8Array представляет собой массив 8-битных целых чисел без знака, содержимое которого инициализируется 0 при создании. После создания на элементы массива можно ссылаться как на объекты или с помощью индексации индекса массива.

new Uint8Array(length); // Создаем беззнаковый целочисленный массив элементов длины, инициализированных 0

Разница между знаковым и беззнаковым: в беззнаковом числе все биты используются для непосредственного представления размера значения. Старший бит числа со знаком используется для обозначения положительного и отрицательного

 u8arr[n] = bstr.charCodeAt(n)

Получите кодировку Unicode для каждой строки bstr и назначьте ее массиву u8arr.

Метод charCodeAt() возвращает кодировку Unicode первого символа строки.

Юникод — это схема кодирования.Юникод был создан для преодоления ограничений традиционных схем кодирования символов.Он устанавливает единообразную и уникальную двоичную кодировку для каждого символа в каждом языке.

stpe3: преобразование base64 в файл

return new File([u8arr], 'file', { type: mime })

Конструктор File() создает новый экземпляр объекта File.

eg: var myFile = new File(bits, name[, options]);

параметр

биты: Массив, содержащий объекты ArrayBuffer, ArrayBufferView, Blob или DOMString — или любую комбинацию этих объектов. Это содержимое файла в кодировке UTF-8.

name: указывает имя файла или путь к файлу.

options Необязательный объект параметров, содержащий дополнительные свойства файла. Доступны следующие варианты: тип: DOMString, представляющий MIME-тип содержимого, которое будет помещено в файл. Значение по умолчанию — «». lastModified: Числовая временная метка Unix (в миллисекундах), когда файл был изменен в последний раз. По умолчанию используется Date.now().

stpe4: передать параметры в двоичном формате

 const params = new FormData()
 params.append('file', blob)

На этом этапе кодировка base64, полученная с устройства, преобразуется в файловый объект и передается серверной части для реализации передачи данных.

Преобразование файла изображения в Base64

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

getBase64Img (img) {
    let canvas = document.createElement('canvas')
    canvas.width = img.width //确保canvas的尺寸和图片一样
    canvas.height = img.height
    let ctx = canvas.getContext('2d') 
    //将图片绘制到canvas中
    ctx.drawImage(img,0,0,img.width,img.height)
    let ext = img.src.substring(img.src.lastIndexOf(',')+1).toLowerCase() // 获取图片类型
    let dataUrl = canvas.toDataUTL('image/'+ext) //转换图片为dataURL
    return dataURL
}

Создайте объект холста

 let canvas = document.createElement('canvas')

Определение параметров, связанных с объектом холста

 canvas.width = img.width
canvas.height = img.height
let ctx = canvas.getContext('2d') // 指定了二维绘图
ctx.drawImage(img,0,0,img.width,img.height)

context.drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

x представляет позицию координаты x, где изображение размещается на холсте, требуется

y представляет позицию координаты y, где изображение размещается на холсте, требуется

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

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

sx представляет позицию по координате x, где изображение начинает обрезаться, необязательно

sy представляет координату Y, где изображение начинает обрезаться, необязательно

swidth представляет ширину обрезанного изображения, необязательно

высота указывает высоту обрезанного изображения, необязательно

Это можно просто понять так: вырезать область изображения от (sx,sy) до (sx+ширина,sy+высота) и поместить ее на холст от (x,y) до (x+ширина,y+высота). ) площадь.

Нарисуйте изображение на холсте и преобразуйте его в строку dataURL.

 ctx.drawImage(img,0,0,img.width,img.height)
 let ext = img.src.substring(img.src.lastIndexOf(',')+1).toLowerCase() // 获取图片类型
 let dataUrl = canvas.toDataUTL('image/'+ext) //转换图片为dataURL
 return dataURL

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

Категории