Get started with image-picker CDN

MIT licensed

Image picker: Software component for selecting/capturing device images for apps.

Tags:
  • Image
  • Picker
  • jquery

Stable version

Copied!

How to start using image-picker CDN


<!DOCTYPE html>
<html>
<head>
    <title>Get started with image-picker CDN - cdnhub.io</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0-alpha1/dist/css/bootstrap.min.css">
    <script src="https://cdn.cdnhub.io/image-picker/0.3.1/image-picker.min.js"></script>
</head>
<body>
    <div class="container mt-5">
        <button id="open-image-picker-button" class="btn btn-primary">Open Image Picker</button>
        <input type="file" id="image-input" class="d-none" accept="image/*" @change="onImageChange">
        <img id="output-image" class="img-thumbnail mt-3" src="" alt="Output image">
    </div>

    <script>
        const imagePicker = new ImagePicker('#image-input', '#output-image');

        document.getElementById('open-image-picker-button').addEventListener('click', () => {
            imagePicker.open();
        });

        function onImageChange(event) {
            imagePicker.setImage(event.target.files[0]);
        }
    </script>
</body>
</html>
Copied!
Copied!
Copied!
Copied!
Copied!

All versions