Code Monkey home page Code Monkey logo

image-file-to-base64-exif's Introduction

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

import imageFileToBase64 from 'image-file-to-base64-exif'

// then, with some file object

imageFileToBase64(file)
    .then(function (base64) {
        // ...
    })

Example

import imageFileToBase64 from 'image-file-to-base64-exif'

const maxWidth = 200
const maxHeight = 200
const quality = 0.8

const fileInput = document.createElement('input')
fileInput.type = 'file'
fileInput.accept = 'image/*'
fileInput.addEventListener('change', handleChange)
document.body.appendChild(fileInput)

function handleChange () {
    imageFileToBase64(fileInput.files[0], maxWidth, maxHeight, quality)
        .then(makeThumbnail)
}

function makeThumbnail (base64) {
    const image = document.createElement('img')
    image.src = base64
    document.body.appendChild(image)
}

API

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

imageFileToBase64(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.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.