Dropzone.js +客户端图像大小调整
Dropzone.js +客户端图像大小调整
提问于 2013-12-12 09:12:12
我想集成Dropzone.js与客户端图像调整大小。我知道有一个函数可以调整缩略图的大小，但我想在上传之前创建一个函数来调整主图像的大小。有谁能帮我吗？
回答 3
Stack Overflow用户
发布于 2016-03-20 16:42:27
以下是如何在不从addedfile上传文件的情况下完成此操作。
重要的是将autoQueue选项设置为false，这样dropzone就不会自动上传用户选择的文件。
var dropzone = new Dropzone (".dropzone", {
...
autoQueue: false,
...
});下一步是在addedfile事件中调整大小并将调整大小的版本入队。
dropzone.on("addedfile", function(origFile) {
var MAX_WIDTH = 800;
var MAX_HEIGHT = 600;
var reader = new FileReader();
// Convert file to img
reader.addEventListener("load", function(event) {
var origImg = new Image();
origImg.src = event.target.result;
origImg.addEventListener("load", function(event) {
var width = event.target.width;
var height = event.target.height;
// Don't resize if it's small enough
if (width <= MAX_WIDTH && height <= MAX_HEIGHT) {
dropzone.enqueueFile(origFile);
return;
}
// Calc new dims otherwise
if (width > height) {
if (width > MAX_WIDTH) {
height *= MAX_WIDTH / width;
width = MAX_WIDTH;
}
} else {
if (height > MAX_HEIGHT) {
width *= MAX_HEIGHT / height;
height = MAX_HEIGHT;
}
}
// Resize
var canvas = document.createElement('canvas');
canvas.width = width;
canvas.height = height;
var ctx = canvas.getContext("2d");
ctx.drawImage(origImg, 0, 0, width, height);
var resizedFile = base64ToFile(canvas.toDataURL(), origFile);
// Replace original with resized
var origFileIndex = dropzone.files.indexOf(origFile);
dropzone.files[origFileIndex] = resizedFile;
// Enqueue added file manually making it available for
// further processing by dropzone
dropzone.enqueueFile(resizedFile);
});
});
reader.readAsDataURL(origFile);
});下面是一个将dataURL转换为dropzone文件的函数。如果使用canvas.toBlob()而不是canvas.toDataURL()来获取调整大小的文件的内容，过程可能会更简单，但并不是所有的浏览器都很好地支持后者。
这只是this函数的修改版本。
function base64ToFile(dataURI, origFile) {
var byteString, mimestring;
if(dataURI.split(',')[0].indexOf('base64') !== -1 ) {
byteString = atob(dataURI.split(',')[1]);
} else {
byteString = decodeURI(dataURI.split(',')[1]);
}
mimestring = dataURI.split(',')[0].split(':')[1].split(';')[0];
var content = new Array();
for (var i = 0; i < byteString.length; i++) {
content[i] = byteString.charCodeAt(i);
}
var newFile = new File(
[new Uint8Array(content)], origFile.name, {type: mimestring}
);
// Copy props set by the dropzone in the original file
var origProps = [
"upload", "status", "previewElement", "previewTemplate", "accepted"
];
$.each(origProps, function(i, p) {
newFile[p] = origFile[p];
});
return newFile;
}Stack Overflow用户
发布于 2017-07-14 07:00:53
Dropzone版本5是最近发布的，所以如果你升级到dropzone 5，那么你可以简单地使用resizeWidth和resizeHeigh在客户端压缩你的图像。
如果你只提供其中的一个，那么width=800将遵循原始的纵横比，例如，如果你只添加了选项：resizeWidth: 800，那么你的图像将被压缩为dropzone像素，并且原始图像的纵横比将被尊重。
Stack Overflow用户
发布于 2018-02-28 04:38:39
好的。我花了一些时间，然后又花了更多的时间来找到如何实现调整大小。
以下是对我有效的最终解决方案：
Import css and dropzone.js
<div class="row">
<div class="col-sm-20 well">
<form action="@Url.Action("_UploadImages", "Notebooks", new { unique = Model.UniqueId })"
method="post"
enctype="multipart/form-data"
class="dropzone"
id="my-dropzone"></form>
</div>
</div>
<script type="text/javascript">
Dropzone.options.myDropzone = {
url: '@Url.Action("_UploadImages", "Notebooks", new { unique = Model.UniqueId })',
autoProcessQueue: true,
uploadMultiple: true,
parallelUploads: 3,
maxFilesize: 10,
resizeWidth: 2048,
addRemoveLinks: false,
init: function () {
}
}
</script>页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/20533191
复制相关文章
相似问题