Dropzone.js 调整图像大小以适合缩略图大小

2024-02-11

我正在尝试调整缩略图中的图像大小以固定框大小。我试过这个:

Dropzone.options.myAwesomeDropzone = {
            maxFiles: 20,
            maxFilesize: 2,
            maxThumbnailFilesize: 20,
            acceptedFiles: 'image/*,.jpg,.png,.jpeg',
            thumbnailWidth:"250",
            thumbnailHeight:"250",
            init: function() {
                var dropzone = this, xhrs = [];
                $.each(uploadedImages, function (index, path) {
                    var xhr = new XMLHttpRequest();
                    xhr.open('GET', path);
                    xhr.responseType = 'blob';//force the HTTP response, response-type header to be blob
                    xhr.onload = function() {
                        var file = new File([xhr.response], '', {'type': xhr.response.type});
                        //dropzone.addUploadedFile(file);
                        dropzone.emit("addedfile", file);
                        dropzone.emit("thumbnail", file, path);
                        dropzone.emit("complete", file);
                    };
                    xhrs.push(xhr);
                    xhr.send();
                });
                this.options.maxFiles = this.options.maxFiles - uploadedImages.count;
            }
        };

这是原始图像的外观:http://files.parsetfss.com/12917a88-ac80-4e5e-a009-fc634161b79c/tfss-6c59b59f-8f57-4610-966e-31bbc203707b-samsung-galaxy-note-4-7290-002.jpg http://files.parsetfss.com/12917a88-ac80-4e5e-a009-fc634161b79c/tfss-6c59b59f-8f57-4610-966e-31bbc203707b-samsung-galaxy-note-4-7290-002.jpg

And this is how it's displayed : enter image description here

我也尝试过:

thumbnailWidth:"300",
thumbnailHeight:"300",
===
thumbnailWidth:"400",
thumbnailHeight:"400",

但一切都没有改变,thumbnailWidth and thumbnailHeight没有影响


我遇到了同样的问题,但是如果您手动调用 dropzone 的调整大小功能,缩略图将处于正确的尺寸:

var file = new File([xhr.response], '', {'type': xhr.response.type});
dropzone.createThumbnailFromUrl(file,path);
dropzone.emit("addedfile", file);
dropzone.emit("thumbnail", file, path);
dropzone.emit("complete", file);
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

Dropzone.js 调整图像大小以适合缩略图大小 的相关文章

  • JQuery _renderItem 没有被调用

    我正在尝试使用 renderItem 函数创建自定义 ui menu item 元素 但经过可能尝试后 我什至无法调用该函数 自动完成功能正在工作 但就像 renderItem 函数不存在一样 这是我的脚本部分
  • Django 模板变量从 {% for %} 循环到 Javascript

    这是一个迭代记录的 Django 模板 每条记录都包含一个由 JS 函数填充的 div 为了让 JS 知道要做什么 它需要从每次 for 循环迭代中获取一个变量并使用它 我不知道具体如何实现这一目标或是否可能 我不知道 也许记录在单独的 J
  • 如何混淆或使 JavaScript 文件不可读?

    我的应用程序中有 JavaScript 脚本 其中包含 JavaScript 和 jQuery 函数 所有用户与我的应用程序的交互都是动态的 并且通过 jQuery 传递到应用程序 我意识到 当我在客户端运行我的应用程序时 客户端可以通过查
  • jQuery live() 和ready() 之间的区别?

    两者之间的确切区别是什么live and ready 编辑 发现die http docs jquery com Events die是相反的live ready http docs jquery com Events ready让你注册一
  • Flot 0.8.2 折线图 - 颜色错误

    我正在使用 Flot 折线图并设置它们的颜色 我发现了一个奇怪的错误 在前 3 种颜色之后 绘图对所有其他线条使用最后一种颜色 这不是正确的行为 更有趣的是图例显示了正确的颜色 这是一个已知的错误 var dataSet label d1
  • IE 中的文件上传按钮和奇怪的文本光标行为

    我构建了一个上传按钮 其格式类似于典型的 html 按钮 而不是浏览器标准文件上传表单 该方法是设置锚元素的样式并在顶部覆盖透明文件输入元素 这种方法在除 IE 之外的所有浏览器中都可以正常工作 在 IE 中 当用户单击上传按钮时 会出现一
  • Node.js - Async.js:并行执行如何工作?

    我想知道 async js 中并行执行是如何工作的 async require async async parallel function callback for var i 0 i lt 1000000000 i Do nothing
  • 如何从 jQuery 获取 ajax 请求下载 Excel

    我有一个 Spring MVC 视图 它提供了一个 excel 文件 但是 我现在修改了该过程 以便用户获得一个模式框 他们可以在下载 excel 之前在其中选择一些选项 这些选定的选项将发送到视图 我的请求看起来像这样 get downl
  • NodeJS 中的缩进多行日志记录

    我要打印JSON stringify d 反对控制台 将上下文作为 Mocha 测试套件输出的一部分 当测试缩进时 我希望对象日志行向右缩进足够远 例如 3 4 个制表符空格 以便它们可以识别地位于右侧describe group 我怎样才
  • 是否可以从 webpack 中的文件名中删除特殊字符?

    长话短说 我的资产文件名中不能包含某些字符 例如连字符 我没有运气通过解析 webpack 文档来弄清楚是否可以使用正则表达式或类似的东西重命名文件 这样我就可以从我无法控制源文件名的 3rd 方包中删除任何连字符 我的超级天真的例子是这样
  • 如何在javascript中解析 yyyy-MM-dd HH:mm:ss.SSS 格式的日期?

    const time 2016 11 16 00 00 00 000 const date new Date time console info date 似乎 safari 无法解析 yyyy MM dd HH mm ss SSS 格式日
  • JQuery Mobile - 内联显示 HTML 表单

    Goal 在 Jquery Mobile 中的同一行显示文本框和提交按钮 Problem 它们不会显示在同一行 我曾多次尝试在同一行显示文本框和提交按钮 但它从未起作用 这是我的代码和我使用的组合
  • jQuery AJAX post 收到 405 错误(不允许 HTTP 动词 POST)

    我有以下 jQuery 帖子到 ASP NET webmethod ajax type POST url AjaxWebMethods aspx UpdNote contentType application json charset ut
  • jQuery 显示/隐藏兄弟姐妹

    我有这段代码 旨在首先隐藏除第一个元素之外的所有相关元素 这个 做的不错啊接下来 它应该根据选择的项目显示 隐藏这些元素 但这部分不起作用 想法 jQuery accordion dl not first child hide hide a
  • 如何在放置后拖动图像克隆?

    我的图像在旋转后可以拖动 但是当图像掉落时我无法第一次拖动图像 这是图像拖放的代码 dhtmlgoodies xpPane li rotatable 我可以拖动此图像克隆并将其放在 工作区域 上 我无法在放置后第一次拖动图像克隆 但克隆在旋
  • 完整日历 - 向事件对象添加额外属性

    可能是由于我缺乏理解 但我使用 PHP 返回 JSON 字符串来带回事件数据
  • Firestore != 查询错误:“”!=”类型的参数无法分配给“WhereFilterOp”类型的参数。ts(2345)

    我的打字稿编译器有问题 此查询出现错误 const xxx admin firestore collection xxx where end timestampDate where end lt timestampDate get 错误 类
  • JavaScript 比较中应使用哪个等于运算符(== 与 ===)?

    这个问题的答案是社区努力 help privileges edit community wiki 编辑现有答案以改进这篇文章 目前不接受新的答案或互动 我在用着JSLint http en wikipedia org wiki JSLint
  • 在64位环境中加载32位进程

    我有以下几个问题 CHM 是 编译的 HTML 文件 我的 CHM 文件有一个启动 32 位应用程序的链接 CHM 文件是用 Javascript 编码的 这在 32 位操作系统环境中运行良好 但这在 64 位操作系统环境中不起作用 原因是
  • 网页执行回发时如何停止在注册表单上?

    我正在做我的最后一年的项目 其中 我在一页上有登录和注册表单 WebForm 当用户点击锚点时Sign Up下拉菜单ddlType 隐藏 和文本框 txtCustName txtEmail and txtConfirmPassword 显示

随机推荐

  • 如何将eclipse库项目从github导入到android studio项目?

    我想用全息圆形进度条 https github com passsy android HoloCircularProgressBar作为我的 android studio 项目中的一个库项目 我尝试通过复制到项目中预先创建的 库 文件夹中
  • 如何在不使用 javac 编译源的情况下运行注释处理器(Java 8 无法使用 Apt)

    如何在不使用 javac 编译源的情况下运行注释处理器 Java 8 无法使用 Apt javac 是否有任何参数可以只运行注释处理而不编译所有文件 我想通过 javac 做什么 只需找到带注释的元素并使用定义的注释处理器处理它们 proc
  • 如何将pandas中的每月数据转换为季度数据

    我有每月的数据 我想将其转换为 3 个月的 周期 其中 q1 从 1 月开始 因此 在下面的示例中 前 3 个月的聚合将转换为第 2 季度的开始 所需格式 1996q2 将 3 个月度值混合在一起得到的数据值是 3 列的平均值 从概念上讲
  • 如何格式化 ruby​​ 记录器?

    如何格式化 ruby 记录器 logger Logger new nice log logger formatter proc do severity datetime progname msg NICE msg n end logger
  • C++14 中的网络库

    赫伯 萨特写道here http isocpp org blog 2013 04 trip report iso c spring 2013 meeting 在他的 ISO C 2013 年春季会议旅行报告中 计划将网络库添加到 C 14
  • 从 JSONArray 中删除 JSON 对象 - Jetison

    有没有直接的方法通过使用index html来删除存储在JSONArray中的JSONObject 我尝试了所有的可能性 仍然无法从 JSON 数组中删除 JSON 对象 任何提示都会有帮助 谢谢 在 java json 中 没有直接的方法
  • Rust 无法正确读取整数输入

    我正在尝试使用一个简单的程序来测试我的 Rust 技能 该程序从单行输入中读取多个整数 它编译正确 但不幸的是当它收到输入时1 2 3 它会出现恐慌 说输入不是有效的整数 有人可以解释一下原因 并解释一下如何修复我的程序吗 use std
  • 字符串缓冲区声明不足

    我使用工具来检查编码风格 我得到了很多建议 StringBuffer 构造函数初始化为大小 16 但附加了至少 35 个字符 这是我的一些代码 final StringBuffer Contents new StringBuffer 为什么
  • android 标签的自定义字体

    我想为我的选项卡使用自定义字体 这是我尝试过的 但我遇到了一个错误
  • 如何给Android-Studio添加版权?

    标题说明了一切 如果我想在Android Studio的代码文件中添加版权注释 当然 我在 首选项 版权 中找到了版权设置 但我无法使其工作 当我创建新的 Java 文件时 版权并没有出现 这是 Android Studio 的错误还是我错
  • 在CSS规则中使用不同字体的网页中显示两种语言的文本

    我的网页按预期使用 Yekan 字体显示波斯语文本 为什么英文文本错误地使用 Alger 以外的字体 font face font family Yekan src url Fonts BYekan ttf unicode range U
  • JavaScript 数组扩展

    只是个小疑问 我使用其原型扩展了 javascript Array 对象 如下所示
  • 如何将函数绑定到 URL 查询字符串的更改,而不是 hashchange

    正如标题所示 我希望将一个函数绑定到 URL 查询字符串的更改 一个例子 from baby to baby bc fsnf 1 brand 37 详细地说 我希望该函数在以下情况下运行from变成to Cheers 如果您的页面没有刷新
  • 如何在同一台机器上设置不同的Scala版本?

    我想关注有关 Scala 1 的书 但它使用 Scala 3 而我安装了 Scala 2 我想使用这两个版本 类似于python2 and python3 我尝试使用以下命令在本地安装 Scala3官方来源 https dotty epfl
  • jQuery 使用公共关键字选择数据属性

    我有两个具有以下设置的元素 span span span span 我使用下划线循环包含这些属性中的任何一个元素 然后执行相关操作 如果有 目前这是这样做的 each data placeholder class data placehol
  • 在python中制作一定范围内均匀分布的数字列表

    创建包含给定边界之间均匀间隔的数字 不仅仅是整数 的任意长度列表的Pythonic方法是什么 例如 my func 0 5 10 lower bound upper bound length 0 0 5 1 1 5 2 2 5 3 3 5
  • 如何在视图中启用 Rails I18n 翻译错误?

    我创建了新的 Rails 3 项目 我尝试在我的观点中使用这样的翻译 t translate test 在我的浏览器中我看起来 translate test 反而 my test translation 我设置的女巫en yml 我的主要问
  • 在jsp中调用java方法

    我有一个 java 类 它对文件执行一些操作 由于java代码很大 我不想在jsp中编写这段代码 我想在需要时调用jsp中的方法 请告诉我需要保存该文件的路径 另外一些如何使用它的示例代码也会有所帮助 在 servlet 中 在 JSP 之
  • 使用 file_get_contents 进行良好的错误处理[重复]

    这个问题在这里已经有答案了 我正在利用简单的htmldom http simplehtmldom sourceforge net 它有这个功能 get html dom form file function file get html do
  • Dropzone.js 调整图像大小以适合缩略图大小

    我正在尝试调整缩略图中的图像大小以固定框大小 我试过这个 Dropzone options myAwesomeDropzone maxFiles 20 maxFilesize 2 maxThumbnailFilesize 20 accept