Dropzone,裁切:上传裁切后的原始尺寸

时间:2020-04-01 17:15:13

标签: jquery file-upload crop dropzone.js croppie

由于dropzone js和croppie 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();
            }
        };

谢谢

0 个答案:

没有答案