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

brccelvz 于 2023-01-24 发布在其他

关注(0)|答案(1)|浏览(125)

我有一个页面，我使用Dropzone.js成功上传了多张图片，但我希望访问者在上传前根据自己的选择裁剪它们。我可以单独使用cropper.js，但未能将它们集成在一起。
下面是我的原始工作代码摘录。

- 超文本标记语言：**

<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();  
     });

我希望我的用户上传所有的图像裁剪在同一个维度。如果多个是不可能的，请帮助我与一个图像。

- 注意：**我没有使用引导

Html

来源：https://stackoverflow.com/questions/75066685/how-do-i-implement-cropper-js-before-uploading-images-with-dropzone-js

1条答案

按热度按时间

pgky5nke1#

//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
            },
        });
    }

在下拉区域transformFile事件中：

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

赞(0）回复(0）举报 2023-01-24

我来回答

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

1条答案

相关问题

热门标签

最新问答