Miss any of our Open RFC calls?Watch the recordings here! »

js-video-thumb-image

1.0.0 • Public • Published

js-video-thumb-image

npm version

Create thumb image from video with input type file

Browser Support

Chrome Firefox Safari Opera Edge IE
Latest ✔ Latest ✔ Latest ✔ Latest ✔ Latest ✔ 11 ✔

Installing

Using npm:

$ npm install js-video-thumb-image

Using bower:

$ bower install js-video-thumb-image

Using yarn:

$ yarn add js-video-thumb-image

Example

// used in comman js
 
const thumbImage = require('js-video-thumb-image');
document
    .getElementsByTagName('input')[0]
    .addEventListener('change', function (event) {
        var file = event.target.files[0];
        createImages(file)
            .then((data) => {
                console.log(data);
            })
            .catch((err) => {
                console.log(err);
            });
    });
// In success data will get object
 
{
    File: File; // file data
    base64Image: 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAUAA'; // base64 data
    error: false; // error false;
    imageUrl: 'blob:null/86bbb246-47a5-4285-aa0c-2a3532b58d53'; // image url
    __proto__: Object;
}
// asnyc and await
const getThumbImage = async (image, fileName) => {
    const { imageUrl, File, error, base64Image } = await thumbImage(
        image,
        fileName
    );
    if (!error) {
        // view,  upload
    }
};

using React and vue

import React from 'react';
import thumbImage from 'js-video-thumb-image';
const thumb = () => {
    const [file, setFile] = React.useState([]);
    const [viewImage, setViewImage] = React.useState();
    const createThumb = async (event) => {
        const { File, error, imageUrl } = await thumbImage(
            event.target.files[0],
            'mythumbimage.png'
        );
        if (!error) {
            setViewImage(imageUrl);
        }
    };
    return (
        <>
            <input type='file' accept='video.*' onChange={createThumb} />
            <img src={viewImage} alt='img' />
        </>
    );
};

License

MIT

Install

npm i js-video-thumb-image

DownloadsWeekly Downloads

2

Version

1.0.0

License

MIT

Unpacked Size

8.45 kB

Total Files

7

Last publish

Collaborators

  • avatar