Image Cropper Converter

Image Cropper Converter

1. မိမိ blog site ကို account အရင်ဝင်ပါ
2. dashboard ထဲက Pages(or)Posts ကိုနှိပ်
3. + အိုင်ကွန်ကိုနှိပ်
4. 🖍️ အိုင်ကွန်ကိုနှိပ်၍ < > HTML view ကိုရွေးချယ်၍နှိပ်ပါ
5. အောက်က code ကို copy ယူပြီးကူးထည့်ပေးပါ
6. save ကိုနှိပ်ပြီးပါပြီ

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.css">
<style>
box {
   font-family: Arial, sans-serif;
   background-color: #f4f4f4;
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 100vh;
   margin: 0;
}
.container {
    background-color: #fff;
    padding: 3px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    border-radius: 8px;
    width: 100%;
    max-width: 100%;
}
h1 {
    text-align: center;
    margin-bottom: 20px;
    color: #333;
}
.image-container {
    text-align: center;
    margin-bottom: 20px;
}
#image {
    max-width: 100%;
    max-height: 500px;
    display: none;
}
.button-container {
    text-align: center;
    margin-top: 20px;
}
.button-container button {
    background-color: #007BFF;
    color: #fff;
    padding: 10px 20px;
    margin: 10px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
}
.button-container button:hover {
    background-color: #0056b3;
}
.output-container {
    margin-top: 20px;
    text-align: center;
}
#outputImage {
    max-width: 100%;
    margin-top: 20px;
}
.input-container {
    margin-bottom: 20px;
    text-align: center;
}
input[type="file"] {
    display: none;
}
.upload-btn {
    padding: 10px 20px;
    background-color: #28a745;
    color: #fff;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    border: none;
    margin-bottom: 20px;
}
.upload-btn:hover {
    background-color: #218838;
}
</style>


<div class="container">
    <h1>Advanced Image Cropper</h1>
    <div class="input-container">
        <label for="uploadImage" class="upload-btn">Upload Image</label>
        <input type="file" id="uploadImage" accept="image/*">
    </div>

    <div class="image-container">
        <img id="image" src="" alt="Uploaded Image">
    </div>

    <div class="button-container">
        <button id="cropButton">Crop Image</button>
        <button id="downloadButton">Download Cropped Image</button>
    </div>

    <div class="output-container">
        
        <img id="outputImage" src="" alt="Cropped Image Preview">
    </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/cropperjs/1.5.12/cropper.min.js"></script>
<script>
    const uploadImage = document.getElementById('uploadImage');
    const imageElement = document.getElementById('image');
    const cropButton = document.getElementById('cropButton');
    const downloadButton = document.getElementById('downloadButton');
    const outputImage = document.getElementById('outputImage');
    let cropper;

    // Handle file upload
    uploadImage.addEventListener('change', function(event) {
        const file = event.target.files[0];
        if (file) {
            const reader = new FileReader();
            reader.onload = function(e) {
                imageElement.src = e.target.result;
                imageElement.style.display = 'block'; // Show the image once loaded

                // Initialize the cropper
                if (cropper) {
                    cropper.destroy();
                }
                cropper = new Cropper(imageElement, {
                    aspectRatio: 16 / 9, // Optional aspect ratio
                    viewMode: 1, // View mode
                    autoCropArea: 0.65, // Default cropping area size
                });
            };
            reader.readAsDataURL(file);
        }
    });

    // Crop the image
    cropButton.addEventListener('click', function() {
        if (!cropper) return alert("Please upload an image first.");
        const canvas = cropper.getCroppedCanvas();
        const croppedImageUrl = canvas.toDataURL('image/png');

        // Display the cropped image in the preview section
        outputImage.src = croppedImageUrl;
    });

    // Download cropped image
    downloadButton.addEventListener('click', function() {
        if (!cropper) return alert("Please crop the image first.");
        const canvas = cropper.getCroppedCanvas();
        const croppedImageUrl = canvas.toDataURL('image/png');

        const link = document.createElement('a');
        link.href = croppedImageUrl;
        link.download = 'cropped-image.png';
        link.click();
    });
</script>