Image File to Base64

This is a utility function to get a base64 encoded image from a DOM File.

The returned image is always an image/jpeg. This means that if you try to read an image/png with transparency, the transparency will become black.

Obvioulsy, it is just for browser usage and the File must be of an image type.

Installation

$ npm install --save image-file-to-base64-exif

Usage

1import imageFileToBase64 from 'image-file-to-base64-exif'
2
3// then, with some file object
4
5imageFileToBase64(file)
6    .then(function (base64) {
7        // ...
8    })

Demo

Example

1import imageFileToBase64 from 'image-file-to-base64-exif'
2
3const maxWidth = 200
4const maxHeight = 200
5const quality = 0.8
6
7const fileInput = document.createElement('input')
8fileInput.type = 'file'
9fileInput.accept = 'image/*'
10fileInput.addEventListener('change', handleChange)
11document.body.appendChild(fileInput)
12
13function handleChange () {
14    imageFileToBase64(fileInput.files[0], maxWidth, maxHeight, quality)
15        .then(makeThumbnail)
16}
17
18function makeThumbnail (base64) {
19    const image = document.createElement('img')
20    image.src = base64
21    document.body.appendChild(image)
22}

API

The imageFileToBase64 function returns a Promise and it has the following signature:

1imageFileToBase64(file, maxWidth/*optional*/, maxHeight/*optional*/, quality/*optional*/)

file

A File object

maxWidth

Default: original file width

Integer, sets the maximum width of the returned image

maxHeight

Default: original file height

Integer, sets the maximum height of the returned image

quality

Default: 1

Float, between 0 and 1, sets the quality of the returned image.