Dropzone 跨平台缩略图生成
Posted
技术标签:
【中文标题】Dropzone 跨平台缩略图生成【英文标题】:Dropzone cross-platform thumbnail generation 【发布时间】:2015-10-07 22:41:26 【问题描述】:我正在使用 Dropzone 进行图片上传,发现了 2 个问题:
-
在某些浏览器中为同一图像生成缩略图失败,例如对于附加的图像,缩略图在 chrome 中正确生成,在 safari 中为空白,在 Firefox 中只有灰色背景。
在 safari 中,大多数缩略图都是正确生成的,但对于某些尺寸/纵横比则不是这样。例如再次附上图片,如果水平拉伸,safari 将生成缩略图,否则不会。
更新
我现在已经确定这是由缩略图宽度的“null”参数引起的。将其设置为一个值可以解决所有浏览器中的问题。理想情况下,我想以原始纵横比显示缩略图,但对于上述某些尺寸/浏览器来说,这似乎是失败的。
是否有解决此问题的方法或解决方法,以便我可以以原始纵横比显示缩略图?
Dropzone 初始化代码:
var photosDropzone = new Dropzone("#photosContainer", url: "% url 'ajax_photo_upload_view' %", maxFilesize: 4,
acceptedFiles: 'image/*', addRemoveLinks: true,
dictRemoveFile:'Delete', thumbnailHeight:160, thumbnailWidth:null, );
【问题讨论】:
【参考方案1】:尝试使用以下 CSS
.dropzone .dz-default.dz-message
opacity: 1;
-ms-filter: none;
-webkit-filter: none;
filter: none;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
background: #fff;
background-repeat: no-repeat;
background-position: 0 0;
position: absolute;
width: 428px;
height: 123px;
margin-left: -214px;
margin-top: -61.5px;
top: 50%;
left: 50%;
font-size: 20px;
.dropzone .dz-preview
margin: 0 10px !important;
.thumbnail
height: 150px;
width: 150px;
margin: 10px;
.thumbnail img
min-height: 100px;
min-width: 100px;
height: 100px;
width: 100px;
.dropzone img
border-radius: 10px;
vertical-align: middle;
min-width: 100px;
min-height: 100px;
【讨论】:
【参考方案2】:您可能必须根据原件的纵横比和大小来计算新的宽度。
有关如何执行此操作的想法,请参阅其他 Stack Overflow Q/A:
Algorithm to resize image and maintain aspect ratio to fit iPhone
【讨论】:
为什么投反对票?这对我来说是一个相当可接受的解决方案以上是关于Dropzone 跨平台缩略图生成的主要内容,如果未能解决你的问题,请参考以下文章