Dropzone cross-platform generazione delle miniature

Question

Sto usando Dropzone per il caricamento di immagini e hanno notato 2 problemi:

1. generazione Miniatura per la stessa immagine non riesce in alcuni browser per esempio per l'immagine allegata, la miniatura è generata correttamente in chrome, vuota in safari e in firefox solo in uno sfondo grigio.
2. In Safari, la maggior parte delle miniature sono generate correttamente, ma non per alcuni formati/proporzioni. per esempio. ancora una volta l'immagine allegata, se streched orizzontalmente, safari genererà la miniatura, altrimenti no.

Aggiornamento

mi hanno ora stabilito che questo è causato dal param "null" per la larghezza delle miniature. Impostandolo su un valore risolve il problema in tutti i browser. Idealmente, mi piacerebbe mostrare una miniatura con le sue proporzioni originali, ma sembra che questo non funzioni per alcune dimensioni/browser come descritto sopra.

C'è una soluzione o una soluzione per questo in modo che possa mostrare le mie miniature ai rapporti di aspetto originali?

Dropzone codice di inizializzazione:

var photosDropzone = new Dropzone("#photosContainer", { url: "{% url 'ajax_photo_upload_view' %}", maxFilesize: 4, 
    acceptedFiles: 'image/*', addRemoveLinks: true, 
dictRemoveFile:'Delete', thumbnailHeight:160, thumbnailWidth:null, }); 

Answer 1

probabilmente si dovrà calcolare la nuova larghezza in base a proporzioni dell'originale e le dimensioni.

Vedi quest'altra Stack Overflow Q/A per un'idea su come fare questo:

Algorithm to resize image and maintain aspect ratio to fit iPhone

Answer 2

Provare a utilizzare seguente 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; 
}