【发布时间】：2021-06-01 03:20:13
【问题描述】：
我想在使用 dropzone.js 上传文件之前调整图像大小。我已经尝试过 dropzone 的内置调整大小功能，但它不会生成高质量的图像，所以我觉得它没有用。我希望使用 pica (https://github.com/nodeca/image-blob-reduce) 在文件被 dropzone.js 发送到服务器之前对其进行处理。
我有一个简单的概念证明，到目前为止，它基于我从其他地方拼凑起来的代码。
有两个问题...
-
上传图片时进度条不起作用，上传完成后通常显示在图片顶部的“完成”复选标记也不会出现。我猜这是因为我没有将以下值复制到新文件中
previewElement: div.dz-preview.dz-image-preview
previewTemplate: div.dz-preview.dz-image-preview
-
我无法添加第二个/第三个文件。我得到了错误
未捕获（承诺中）类型错误：无法读取 reducer._create_blob 处未定义的属性“toBlob”
这是我的半工作代码 sn-p...
<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 集成，但在 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 更新的问题。
【问题讨论】：