javascript - Dropzone JS：在添加的文件上集成 Cropper JS。如何调用 done 函数来完成“transformFile”参数？

Question

我使用 dropzone js 在 laravel 中创建了一个图像上传器，并考虑在上传之前集成cropper js 来裁剪图像。所以我先尝试了cropper js集成，一切都很好，工作如我所愿。但是我想将图像与我的表单一起提交，所以我添加了两个附加选项： autoProcessQueue: false, autoQueue: true.

而且我必须在 addedfiles 上调用 transformFile 方法，这是我在 dropzone 上的代码：

Dropzone.autoDiscover = false;

var previewNode = document.querySelector("#template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

var myDropzone = new Dropzone(".dropzoneDragArea", { // Make the dropzonedragndrop class a dropzone
   url: "/registerUser", // Set the url
   transformFile: function(file, done) {
       console.log('done', done);
       // Create Dropzone reference for use in confirm button click handler
       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 confirm button at the top left of the viewport
       var buttonConfirm = document.createElement("button");
       buttonConfirm.className = "btn btn-success";
       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);
                   }
               );
               // Return the file to Dropzone
               done(blob);
           });

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

       var buttonReset = document.createElement("button");

       buttonReset.className = "btn btn-warning";
       buttonReset.style.position = "absolute";
       buttonReset.style.left = "120px";
       buttonReset.style.top = "10px";
       buttonReset.style.zIndex = 9999;
       buttonReset.textContent = "Reset";
       editor.appendChild(buttonReset);
       buttonReset.addEventListener("click", function() {
           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, { aspectRatio: 3/4 });
       console.log('test');
   },
   thumbnailWidth: 112,
   thumbnailHeight: 150,
   parallelUploads: 1,
   maxFilesize: 1,
   maxFiles: 1,
   dictFileTooBig: `File terlalu besar {{filesize}} MB. Ukuran maksimal: {{maxFilesize}} MB.`,
   previewTemplate: previewTemplate,
   autoProcessQueue: false,
   autoQueue: true, // Make sure the files aren't queued until manually added
   previewsContainer: "#previews", // Define the container to display the previews
   clickable: ".fileinput-button", // Define the element that should be used as click trigger to select files.
   params: {
       '_token': token,
   },init: function(){
       myDropzone = this;
       this.on("addedfiles", function(file) {
           // get this code below from browsing through google
           doneCounter = 0;
           doneFunction = (function(_this) {
               return function(file, paramName, fileName) {
                   return function (transformedFile) {
                       formData.append(paramName, transformedFile, fileName);
                       if (++doneCounter === file.length) {
                           return _this.submitRequest(xhr, formData, file);
                       }
                   };
               };
           })(this);
           // get this above code from browsing through google
           this.options.transformFile.call(file, doneFunction(file, this._getParamName, file[0].upload.filename));
       });

使用该代码，我觉得我对 doneFunction 有误。我在控制台上收到此错误消息：

Uncaught TypeError: Failed to execute 'createObjectURL' on 'URL': Overload resolution failed.
    at File.transformFile (photoUploader.js:84)
    at b.<anonymous> (photoUploader.js:125)
    at b.value (dropzone.min.js:1)
    at b.value (dropzone.min.js:1)
    at HTMLDivElement.drop (dropzone.min.js:1)
transformFile @ photoUploader.js:84
(anonymous) @ photoUploader.js:125
value @ dropzone.min.js:1
value @ dropzone.min.js:1
drop @ dropzone.min.js:1

任何人都可以帮助我获得“完成功能”以添加 transformFile 参数？！感谢你的帮助。谢谢

标签： javascriptjquerylaravel