Dropzone, cropp ie: загрузка обрезанного и оригинального размера - PullRequest
Новая
       75

Dropzone, cropp ie: загрузка обрезанного и оригинального размера

0 голосов
/ 01 апреля 2020

Я восстановил часть кода в сети, которая позволяет загружать и обрезать изображения благодаря dropzone js и cropp ie js.

Код работает без нареканий. Изображение хорошо обрезано и сохраняется на сервере.

Вы мне нужны, потому что мне нужно адаптировать этот код, чтобы он также отправлял второй фрагмент изображения (в другом размере).

Как я могу сделать ? Можете ли вы помочь мне, приведя пример, чтобы я мог понять? 

Dropzone.options.uploadZone = {
            url: '/backoffice/entreprise/upload/gallery',
            acceptedFiles: 'image/jpeg, image/png',
            parallelUploads: 1,
            paramName: 'pictures',
            maxFilesize: 10,
            autoProcessQueue:false,

            error: function(file, response){
                console.log(response);
            },
            transformFile: function(file, done){
                var myDropZone = this;

                // Create the image editor overlay
                var editor = document.createElement('div');
                editor.style.position = 'fixed';
                editor.style.left = 0;
                editor.style.right = 0;
                editor.style.top = 0;
                editor.style.bottom = 0;
                editor.style.zIndex = 9999;
                editor.style.backgroundColor = '#000';
                document.body.appendChild(editor);

                // Create the confirm button
                var confirm = document.createElement('button');
                confirm.style.position = 'absolute';
                confirm.style.left = '20px';
                confirm.style.top = '20px';
                confirm.style.zIndex = 9999;
                confirm.textContent = 'Valider';

                confirm.addEventListener('click', function()
                {
                    // Get the output file data from Croppie
                    croppie.result({
                        type:'blob',
                        size: {
                            width: 600,
                            height: 901
                        }
                    }).then(function(blob)
                    {
                        // Update the image thumbnail with the new image data
                        myDropZone.createThumbnail(
                            blob,
                            myDropZone.options.thumbnailWidth,
                            myDropZone.options.thumbnailHeight,
                            myDropZone.options.thumbnailMethod,
                            false,
                            function(dataURL) {

                                // Update the Dropzone file thumbnail
                                myDropZone.emit('thumbnail', file, dataURL);

                                // Return modified file to dropzone
                                done(blob);
                            }
                        );
                    });

                    // Remove the editor from view
                    editor.parentNode.removeChild(editor);
                });

                editor.appendChild(confirm);

                // Create the croppie editor
                var croppie = new Croppie(editor, {
                    enableResize: false,
                    enableExif: true,
                    enableOrientation: true,
                    viewport: {
                        width: 300,
                        height: 450,
                        type: 'square' //square
                    },
                });

                // Load the image to Croppie
                croppie.bind({
                    url: URL.createObjectURL(file),
                    zoom: 0
                });

            },
            complete: function(file){
                //$('#myFiles').append(file);
            },
            queuecomplete: function(file) {

                this.removeAllFiles();
            }
        };

Спасибо

...