在使用 Dropzone.js 上传图像之前如何实现 cropper.js

Question

我有一个页面，我可以在其中使用 Dropzone.js 成功上传多张图片，但我希望访问者在上传前根据自己的选择裁剪它们。我能够单独使用 cropper.js 但无法将它们集成在一起。

这是我的原始工作代码摘录。

HTML:

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>No Photo Selected</span>
    </div>
</div>
<div id="add_file">POST</div>

记者：

//Dropzone script
    Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("div#myDrop", 
     { 
         paramName: "__files", // The name that will be used to transfer the file
         addRemoveLinks: true,
         uploadMultiple: true,
         withCredentials: true,
         autoProcessQueue: false,
         parallelUploads: 5,
         maxFiles: 5,
         maxFilesize: 20, // MB
         acceptedFiles: ".png, .jpeg, .jpg, .gif, .JPG, .jfif",
         url: "sdk/process-upload.php",
         capture: "camera",
         init: function () {
             this.on('sending', function(file, xhr, formData) {
                 
                 // Append all form inputs to the formData Dropzone will POST. This data is taken from a form
                 var l = document.getElementById("locationval").value;
                 formData.append('location', l);
                 var x = document.getElementById("postmaker").innerText;
                 formData.append('pdata', x);
             });
         }
         
     });

     
     /* Add Files Script*/
     myDropzone.on("success", function(file, message){
        $("#msg").html(message);
        //setTimeout(function(){window.location.href="index.php"},800);
     });
     
     myDropzone.on("error", function (data) {
         $("#msg").html('<div class="alert alert-danger">There is some thing wrong, Please try again!</div>');
     });
     
     myDropzone.on("complete", function(file) {
        myDropzone.removeFile(file);
     });
     
     $("#add_file").on("click",function (){
        myDropzone.processQueue();  
     });

我希望我的用户上传以相同尺寸裁剪的所有图像。如果租约不可能有多个，请帮我一张图片。

笔记：我没有使用引导程序

Answer 1

 //import cropperjs
//cropper js function
 function cropImage(myDropZone, file, done){

        // 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 confirm button at the top left of the viewport
        var buttonConfirm = document.createElement('button');
        buttonConfirm.style.position = 'absolute';
        buttonConfirm.style.left = '10px';
        buttonConfirm.style.top = '10px';
        buttonConfirm.style.zIndex = 9999;
        buttonConfirm.textContent = 'Confirm';
        editor.appendChild(buttonConfirm);
        buttonConfirm.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) {
                // Create a new Dropzone file thumbnail
                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 the file to Dropzone
                        done(blob);
                    });
            });
            // Remove the editor from the view
            document.body.removeChild(editor);
        });

        // Create an image node for Cropper.js
        var image = new Image();
        image.src = URL.createObjectURL(file);
        editor.appendChild(image);

        // Create Cropper.js
        var cropper = new Cropper(image, {
            cropBoxResizable: false,
            dragMode: 'move',
            toggleDragModeOnDblclick: false,
            data: {
                width: 500,
                height: 350
            },
        });
    }

在 dropzone transformFile 事件中：

 transformFile: function (file, done) {
            // Create Dropzone reference for use in confirm button clickhandler
            var myDropZone = this;
            cropImage(myDropZone, file, done);
 }