If you like this site and you like coffee, why not buy me one. Because I love it

Click to buy coffe
avatar
Untitled

Guest 82 3rd Jan, 2023

MARKUP 8.37 KB
                                           
                         <html>

<head>
    <title>How to Crop Image Before Uploading using Cropper Js?</title>
    <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
    <meta name="viewport" content="width=device-width" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
        integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">


    <link href="cropper.css" rel="stylesheet">
    <script src="cropper.js"></script>
</head>
<style type="text/css">
    img {
        display: block;
        max-width: 100%;
    }

    .preview {
        overflow: hidden;
        width: 160px;
        height: 160px;
        margin: 10px;
        border: 1px solid red;
    }
</style>

<body>
    <div class="container">
        <h5>Upload Images</h5>
        <!-- <form method="post"> -->
        <input type="file" name="image" class="image" onchange="uploadImage()" id="uploadImg">
        <!-- </form> -->
    </div>



    <!-- Modal start -->
    <div class="modal fade" id="cropModal" tabindex="-1" role="dialog" aria-labelledby="modalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="modalLabel">Crop image</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">×</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="img-container">
                        <div class="row">
                            <div class="col-md-8">
                                <!--  default image where we will set the src via jquery-->
                                <img id="image">
                            </div>
                            <div class="col-md-4">
                                <!-- <div class="preview" id="preview"></div> -->
                                <img id="preview">
                            </div>
                        </div>

                        <div class="row">
                            <div class="col-md-12">
                                <!--  default image where we will set the src via jquery-->
                                <img id="imageFinal">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Cancel</button>
                    <button type="button" class="btn btn-primary" id="crop">Przytnij</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Modal end -->

    </div>
    </div>

    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
        integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
        crossorigin="anonymous"></script>
    <script>


        var cropper, reader, file;


        function uploadImage() {

            //aktualnie dodane
            var uploadImg = document.getElementById('uploadImg');

            const file = uploadImg.files[0];
            const reader = new FileReader();

            reader.addEventListener("load", () => {
                openModal(reader.result);
            });

            reader.readAsDataURL(file);
        }

        function openModal(base64) {


            var cropModal = $('#cropModal');
            var image = document.getElementById('image');

            image.src = base64;
            cropModal.modal('show');


            cropModal.on('shown.bs.modal', function () {
                cropper = new Cropper(image, {
                    aspectRatio: 1,
                    viewMode: 3,
                    //preview: '.preview'
                });
            }).on('hidden.bs.modal', function () {
                cropper.destroy();
                cropper = null;
            });



            //var imageFinal = document.getElementById('imageFinal');
            var preview = document.getElementById('preview');



            $("#crop").click(function () {
                canvas = cropper.getCroppedCanvas({
                    width: 160,
                    height: 160,
                });

                canvas.toBlob(function (blob) {
                    url = URL.createObjectURL(blob);
                    var reader = new FileReader();
                    reader.readAsDataURL(blob);
                    reader.onloadend = function () {
                        var base64data = reader.result;
                        //imageFinal.src = base64data;
                        preview.src = base64data;
                    };
                });
            });

        }



        // var bs_modal = $('#cropModal');
        // var image = document.getElementById('image');
        // var imageFinal = document.getElementById('imageFinal');

        // var cropper, reader, file;


        /*$("body").on("change", ".image", function (e) {
            var files = e.target.files;
            var done = function (url) {
                image.src = url;
                bs_modal.modal('show');
            };


            if (files && files.length > 0) {
                file = files[0];

                if (URL) {
                    done(URL.createObjectURL(file));
                } else if (FileReader) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                        done(reader.result);
                    };
                    reader.readAsDataURL(file);
                }
            }
        });*/

        // bs_modal.on('shown.bs.modal', function () {
        //     cropper = new Cropper(image, {
        //         aspectRatio: 1,
        //         viewMode: 3,
        //         preview: '.preview'
        //     });
        // }).on('hidden.bs.modal', function () {
        //     cropper.destroy();
        //     cropper = null;
        // });



        //Dopiero po kliknięciu


        // $("#crop").click(function () {
        //     canvas = cropper.getCroppedCanvas({
        //         width: 160,
        //         height: 160,
        //     });

        //     canvas.toBlob(function (blob) {
        //         url = URL.createObjectURL(blob);
        //         var reader = new FileReader();
        //         reader.readAsDataURL(blob);
        //         reader.onloadend = function () {
        //             var base64data = reader.result;
        //             //alert(base64data);
        //             imageFinal.src = base64data;
        //         };
        //     });
        // });


    </script>
</body>

</html>
                      
                                       
To share this paste please copy this url and send to your friends
RAW Paste Data
Recent Pastes
Ta strona używa plików cookie w celu usprawnienia i ułatwienia dostępu do serwisu oraz prowadzenia danych statystycznych. Dalsze korzystanie z tej witryny oznacza akceptację tego stanu rzeczy.
Wykorzystywanie plików Cookie
Jak wyłączyć cookies?
ROZUMIEM