Build a Croppie.js Image Cropper Editor With Live Preview in Browser Using HTML CSS & Javascript

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>FREE Image Circle Crop Online Tool</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.css" />
  <style>
    body {
      font-family: Arial, sans-serif;
      padding: 20px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      background-color: #f9f9f9;
    }

    .croppie-container {
      margin: 20px 0;
    }

    #preview {
      margin-top: 20px;
      text-align: center;
    }

    #preview img {
      max-width: 100%;
      border: 1px solid #ccc;
      margin-top: 10px;
    }
  </style>
</head>
<body>
  <h1 class="text-xl font-semibold mb-4">Image Cropper with Croppie</h1>
  
  <!-- File Input -->
  <input type="file" id="upload" accept="image/*" class="mb-4 p-2 border border-gray-300 rounded-lg" />
  
  <!-- Croppie Container -->
  <div id="croppie-container" class="mb-4"></div>
  
  <!-- Crop Button -->
  <button id="crop-btn" class="bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded-lg mb-4">
    Crop
  </button>
  
  <!-- Preview -->
  <div id="preview">
    <h2 class="text-lg font-medium mb-2">Cropped Image Preview:</h2>
    <img id="cropped-image" class="mx-auto" src="" alt="Cropped Image" />
  </div>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/croppie/2.6.5/croppie.min.js"></script>
  <script>
    // Initialize variables
    let croppieInstance;

    // File Input Change Event
    document.getElementById('upload').addEventListener('change', function (event) {
      const file = event.target.files[0];
      if (file) {
        const reader = new FileReader();
        reader.onload = function (e) {
          // Destroy the previous instance if it exists
          if (croppieInstance) {
            croppieInstance.destroy();
          }

          // Create Croppie instance
          croppieInstance = new Croppie(document.getElementById('croppie-container'), {
            viewport: { width: 200, height: 200, type: 'circle' }, // Circle shape
            boundary: { width: 300, height: 300 }, // Boundary size
            enableExif: true,
            enableZoom: true,
            showZoomer: true
          });

          // Bind the selected image
          croppieInstance.bind({
            url: e.target.result
          });
        };
        reader.readAsDataURL(file);
      }
    });

    // Crop Button Click Event
    document.getElementById('crop-btn').addEventListener('click', function () {
      if (croppieInstance) {
        // Get the cropped image as a Base64 string
        croppieInstance.result({
          type: 'base64',
          size: 'viewport'
        }).then(function (croppedImage) {
          // Set the preview image source
          document.getElementById('cropped-image').src = croppedImage;
        });
      }
    });
  </script>
</body>
</html>

100

101

102

103

104

105

<!DOCTYPE html>

<head>

<title>FREE Image Circle Crop Online Tool</title>

<style>

body {

font-family: Arial, sans-serif;

padding: 20px;

display: flex;

flex-direction: column;

align-items: center;

justify-content: center;

height: 100vh;

background-color: #f9f9f9;

}

.croppie-container {

margin: 20px 0;

}

#preview {

margin-top: 20px;

text-align: center;

}

#preview img {

max-width: 100%;

border: 1px solid #ccc;

margin-top: 10px;

}

</style>

</head>

<body>

<h1 class="text-xl font-semibold mb-4">Image Cropper with Croppie</h1>

Crop

</button>

<h2 class="text-lg font-medium mb-2">Cropped Image Preview:</h2>

</div>

// Initialize variables

let croppieInstance;

// File Input Change Event

document.getElementById('upload').addEventListener('change', function (event) {

const file = event.target.files[0];

if (file) {

const reader = new FileReader();

reader.onload = function (e) {

// Destroy the previous instance if it exists

if (croppieInstance) {

croppieInstance.destroy();

}

// Create Croppie instance

croppieInstance = new Croppie(document.getElementById('croppie-container'), {

viewport: { width: 200, height: 200, type: 'circle' }, // Circle shape

boundary: { width: 300, height: 300 }, // Boundary size

enableExif: true,

enableZoom: true,

showZoomer: true

});

// Bind the selected image

croppieInstance.bind({

url: e.target.result

});

};

reader.readAsDataURL(file);

}

});

// Crop Button Click Event

document.getElementById('crop-btn').addEventListener('click', function () {

if (croppieInstance) {

// Get the cropped image as a Base64 string

croppieInstance.result({

type: 'base64',

size: 'viewport'

}).then(function (croppedImage) {

// Set the preview image source

document.getElementById('cropped-image').src = croppedImage;

});

}

});

</script>

</body>

</html>

Build a Croppie.js Image Cropper Editor With Live Preview in Browser Using HTML CSS & Javascript

Comments

Leave a Reply Cancel reply

Archives