将 dropzone.js 与 pica（或其他图像 compression/resize 库）一起使用

Question

我想在使用 dropzone.js 上传文件之前调整图像大小。我已经尝试过 dropzone 的内置调整大小功能，但它不会生成高质量的图像，所以我觉得它没有用。我希望在 dropzone.js.

将文件发送到服务器之前使用 pica (https://github.com/nodeca/image-blob-reduce) 来处理文件

我有一个简单的概念证明，它基于我从其他地方拼凑的代码，目前有效。

有 2 个问题...

上传图片时进度条不起作用，上传完成后通常显示在图片顶部的“完成”复选标记也不会出现。我猜这是因为我没有将以下值复制到新文件中

previewElement: div.dz-preview.dz-image-preview

previewTemplate: div.dz-preview.dz-image-preview
我无法添加第二个/第三个文件。我收到错误

Uncaught (in promise) TypeError: Cannot read property 'toBlob' of undefined at reducer._create_blob

这是我的半工作代码片段...

  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/dropzone.min.css" integrity="sha512-3g+prZHHfmnvE1HBLwUnVuunaPOob7dpksI7/v6UnF/rnKGwHf/GdEq9K7iEN7qTtW+S0iivTcGpeTBqqB04wA==" crossorigin="anonymous" />
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/basic.css" integrity="sha512-Ucip2staDcls3OuwEeh5s9rRVYBsCA4HRr18+qd0Iz3nYpnfUeCIMh/82aHKeYgdaXGebmi9vcREw7YePXsutQ==" crossorigin="anonymous" />
 
   <!-- dropzone.js -->
   <script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.7.2/min/dropzone.min.js" integrity="sha512-9WciDs0XP20sojTJ9E7mChDXy6pcO0qHpwbEJID1YVavz2H6QBz5eLoDD8lseZOb2yGT8xDNIV7HIe1ZbuiDWg==" crossorigin="anonymous"></script>

   <script src="js_libraries/pica/image-blob-reduce.js"></script>
    

Dropzone.autoDiscover = false;
    var myDropzone = new Dropzone("#my-awesome-dropzone", {
        url: "api/api_uploadPhotos.php",
        autoProcessQueue: false, // use: myDropzone.processQueue() to process
        addRemoveLinks: true,

        parallelUploads: 20,
        maxFiles: 20,

    });

    myDropzone.on("addedfile", function (origFile) {

        currFileType = origFile.type;
        currFileName = origFile.name;
        console.log('currFileType:' + currFileType);
        console.log('currFileName:' + currFileName);

        // get dimensions of image
        var url = URL.createObjectURL(origFile);
        var img = new Image;
        img.onload = function () {

            currFileWidth = img.width; // alert(img.width);
            currFileHeight = img.height;
            console.log('width: ' + currFileWidth);
            console.log('height: ' + currFileHeight);
            URL.revokeObjectURL(img.src);

            if (currFileType == 'image/jpeg') {

                // ANCHOR: blob reducer
                reducer._create_blob = function (env) {
                    return this.pica.toBlob(env.out_canvas, 'image/jpeg', 1.0)
                        .then(function (blob) {
                            env.out_blob = blob;
                            return env;
                        });
                };

                // reducer
                reducer
                    .toBlob(
                        origFile, 
                        {
                            max: 1024,
                        }
                    )
                    .then(function (blob) {
                        console.log('done reducer');

                        document.getElementById('result').src = URL.createObjectURL(blob);

                         var newfile = new File([blob], "file_name.jpeg", { type: "image/jpeg", lastModified: Date.now() });
                        newfile['accepted'] = true;
                        newfile['status'] = 'queued';
                        newfile['upload'] = origFile['upload'];

                        var origFileIndex = myDropzone.files.indexOf(origFile);
                        myDropzone.files[origFileIndex] = newfile;

                    }); // reducer .then
            } // image/jpeg

        };
        img.src = url;

    });

抛出错误的部分是：

return this.pica.toBlob(env.out_canvas, 'image/jpeg', 1.0)

我不是 100% 决定使用 pica，但它生成的图像质量好，文件小，而且速度很快。 Fineuploader 与 pica 集成，但 development/support 因为它在 3 年前就被删除了。

非常感谢任何想法。谢谢！

编辑： 看起来下面的代码是阻止添加第二张图片的原因。注释掉这段代码，允许添加第二/第三张图片。代码取自 image-blob-reduce 的 github 页面，不能 100% 确定我为什么在这次测试中复制它。

            /*
            reducer._create_blob = function (env) {
                return this.pica.toBlob(env.out_canvas, 'image/jpeg', 1.0)
                    .then(function (blob) {
                        env.out_blob = blob;
                        return env;
                    });
            };
            */

编辑 2： 我是对的，复制了

  newfile['previewElement'] = origFile['previewElement'];
  newfile['previewTemplate'] = origFile['previewTemplate'];

修复了有关上传状态和完成 UI 更新的问题。

Answer 1

请参阅原始问题的编辑中的 causes/fixes。如有必要，您可以将 reducer._create_blob 移动到文件的更全局的 space 中（例如在声明 reducer 之后）。那部分代码不应该在 dropzone 事件处理程序中。我实际上完全删除了该代码，因为它强制所有输出为 jpg。我希望 png 在 resize/etc.

之后保持 png

将 dropzone.js 与 pica（或其他图像 compression/resize 库）一起使用

using dropzone.js with pica (or other image compression/resize libraries)

javascript

dropzone.js