javascript - Dropzone cross-platform thumbnail generation -


i using dropzone image uploads , have noticed 2 issues:

  1. thumbnail generation same image fails in browsers e.g. image attached, thumbnail generated in chrome, blank in safari , in firefox grey background.
  2. in safari, thumbnails generated, not sizes/aspect ratios. e.g. once again attached image, if streched horizontally, safari generate thumbnail, otherwise not.

update

i have established being caused "null" param thumbnail width. setting value fixes issue in browsers. ideally, show thumbnail @ original aspect ratio, seems failing sizes/browsers described above.

is there fix or workaround can show thumbnails @ original aspect ratios?

dropzone init code:

var photosdropzone = new dropzone("#photoscontainer", { url: "{% url 'ajax_photo_upload_view' %}", maxfilesize: 4,      acceptedfiles: 'image/*', addremovelinks: true,  dictremovefile:'delete', thumbnailheight:160, thumbnailwidth:null, }); 

enter image description here

try using following 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; } 

Comments

Popular posts from this blog

qt - Using float or double for own QML classes -

Create Outlook appointment via C# .Net -

ios - Swift Array Resetting Itself -