드롭존에 dropzone.js 크롭기능 추가 cropper.js 기능

1. 필요 js

 1) dropzone.js https://www.dropzonejs.com/

 2) dropzone.css

 3) cropper.js https://fengyuanchen.github.io/cropperjs/

 4) cropper.css

 

 

두가지 기능을 합쳐서 구현했습니다.

컨트롤러 쪽에서는 MultipartFile file 파라미터로 파일을 받고

 

 

json 형식으로 response해주면 됩니다.

model.put("link", "http://xxx/xxx.png); //저장된 파일 이미지 경로URL
model.put("userFileId", userFileId); //저장된 파일 아이디
model.put("result", true);

 

//target = 드롭존 wrapper jquery객체 $(selector);
function bindDropZone(target){
    target.dropzone({
        autoProcessQueue:true,
        url:"/file/froalaUpload.json",
        previewTemplate:"<div class='dropzone-previews'><img><input type='hidden' name='imageId'/><button type='button' onclick='removePreviewImage(this)'>X</button></div>",
        success:function(file,res){
            if(res.result){
                var last = target.find(".dropzone-previews").last();
                last.siblings('.dropzone-previews').remove();
                last.find("img").attr("src",res.link);
                last.find("input[name='imageId']").val(res.userFileId);
            }
            console.log(res);
        },
        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';

            // Create the confirm button
            var confirm = document.createElement('button');
            confirm.style.position = 'absolute';
            confirm.style.left = '10px';
            confirm.style.top = '10px';
            confirm.style.zIndex = 9999;
            confirm.textContent = 'Confirm';
            confirm.addEventListener('click', function() {

                // Get the canvas with image data from Cropper.js
                var canvas = cropper.getCroppedCanvas({
                    width: 256,
                    height: 256
                });



                // Turn the canvas into a Blob (file object without a name)
                canvas.toBlob(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);
                        }
                    );

                },file.type);

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

            });
            editor.appendChild(confirm);

            // Load the image
            var image = new Image();
            image.src = URL.createObjectURL(file);
            editor.appendChild(image);

            // Append the editor to the page
            document.body.appendChild(editor);

            // Create Cropper.js and pass image
            var cropper = new Cropper(image, {
                aspectRatio: 1
            });

        }
    });
}

//공백상태로
function removePreviewImage(element){
    $(element).parents(".dropzone-previews").remove();
}