@ilyas.ariba/takepicjs NPM

takepic

TakePicJs

TakePicJs is a camera solution for your Web app. It lets your users take, crop, edit and save pictures. As a developer you get notified of all the user interactions and get the beautiful UI for free.

features!

Take picture
Edit and add filters (Contraste, Brightness, Saturate, Grayscale)
Crop and adjust
Download the final result

Tech

For development no external framework was used, we used this language :

Javascript - only VanillaJs : getUserMedia(), <video>, <canvas>

Installation

Several quick start options are available: Install with npm :

$ npm i @ilyas.ariba/takepicjs

You can also use CDN :

https://takepicjs.netlify.com/style.css
https://takepicjs.netlify.com/script.js

<html>
<head>
    <link rel="stylesheet" type="text/css" href="style.min.css">
</head>
<body>
    <div id="cropContainer">
        <!-- put this div if you want to start after button click -->
        <div class="container welcome" id="welcome">
            <button id="showModule" onclick="showModule(true)">tacke picture</button>
        </div>
        <!-- / put this div if you want to start after button click -->
        <div class="container all hidden" id="module">
            <div class="row">
                <video autoplay="true" loop id="myVideo" width="480" height="320"></video>
                <canvas id="canvas" width="300" height="300"></canvas>
            </div>
        </div>
    </div>

    <script src="script.min.js"></script>
    <script>
        cropInit(
            // show start button
            true
        );
    </script>
</body>
</html>

Demo

You can test the module online : TakePicJs

Todos

User can rotate the picture
User can customize the UI

@infinitebrahmanuniverse/nolb-_il @everything-registry/sub-chunk-458

0.0.1

5 years ago