Odată ce am întâlnit un bug magic, cauza pe care nu l-am găsit timp de aproape o lună. Da, există un motiv, nu putea fi reprodus nici măcar. Clientul sa plâns constant că imaginile sunt tăiate incorect, dar totuși se transformă în mod imprevizibil ...
Esența proiectului a fost faptul că utilizatorii încărcați fotografii, care le însoțesc cu povestiri scurte, urmate de moderatori verificați conținutul fotografiile relevante tăiate teme de resurse ale raportului de aspect dorit și să publice aceste povești.
În mod literal de la primele zile de lansare a proiectului în producție, au început să sosească plângerile moderatorilor. S-au plâns că imaginile sunt tăiate, nu cum era de așteptat, apar uneori dungi negre, uneori imagini rândul său, dintr-o dată, și, uneori, nu se produce nicio modificare după tundere.
Pentru a decupa imagini, am folosit biblioteca de decupare a imaginilor django. care permite administratorului jango să decupeze imaginile utilizând Jcrop plug-in-ul jQuery.
Deoarece eroarea nu a putut fi reprodusă în nici un fel, au început să creadă că motivul se ascunde undeva în partea clientului. În două săptămâni și jumătate de căutare a erorilor, au fost testate puțin mai puțin decât toate combinațiile diferitelor browsere și sisteme de operare, inclusiv versiunile învechite de browsere. Dar nu a fost posibilă reproducerea erorii.
Cu toate acestea, testarea diligentă a tăierii imaginilor în diferite browsere a relevat o eroare concomitentă. Din browser, apropo, independent. Serverul a fost optimizat pentru un număr mare de vizitatori. Proiectul în sine a fost un site regenerat, static cached cu nginx; un api mic pentru adăugarea și căutarea poveștilor; și o interfață administrativă pentru pre-moderarea povestilor și regenerarea conținutului static.
Sa întâmplat că Nginx este prea greu pentru a face față cu cache, și destul de des după decupați în show admin vechi (nu taie), după care moderatorul taie din nou și din nou imaginea, și ca urmare a imaginii originale este tăiată la coordonatele inexistente. În consecință, rezultatul a fost o imagine mărunțită cu dungi negre, iar când cache-ul a fost actualizat, a devenit vizibil.
În consecință, problema de afișare a imaginii vechi după decupare a dispărut. În panoul admin, a fost afișat următorul cod de afișare a imaginii html:
Eroarea a fost găsită și eliminată. Mai multe nu trebuie repetate. Poți triumfa victoria.
În mod literal, la o săptămână după schimbarea producției, moderatorii au primit din nou o plângere privind decuparea incorectă a imaginii. Din fericire, de data aceasta au indicat în mod explicit ce imagine a fost reprodusă în cultura greșită și a trimis imaginea prin e-mail.
Deschiderea scrisorii, am deschis fotografia într-o filă nouă și am salvat-o. Am inceput testarea in vagrant e - eroarea nu este reprodusa, imaginea este taiata dupa cum este necesar, nimic nu se schimba si barele negre nu apar. Am verificat aceeași imagine pe serverul de producție - nu se joacă. Trucul a fost că a fost necesar să se descarce imaginea. dar nu salvați de scrisoare. După ce a primit imaginea originală, eroarea a fost reprodusă în mod regulat.
În imaginile grafice, meta informația suplimentară poate fi salvată în format EXIF. În cazul în care, printre altele, pot fi informații despre orientarea imaginii. După deducerea exifului acestui fișier, a devenit imediat clar de ce eroarea este reprodusă pe el.
Eticheta de orientare Exif descrie orientarea imaginii când este afișată, folosind valori de la 1 la 8:
În mod evident, cu un exemplu de cameră, pot exista 4 variante ale etichetei de orientare:
Când salvați o imagine utilizând PIL toate metadatele EXIF sunt șterse, astfel încât nici o meta-informații stocate imagine nu mai este rotit atunci când sunt afișate și rămâne așa cum este ea. De exemplu, din punctul de vedere al utilizatorului - acestea devin imprevizibile.
Deoarece PIL șterge metainformația atunci când salvează o imagine, vom roti imaginea cu eticheta de orientare în sine.
Această funcție verifică prezența informațiilor despre rotația imaginii și, dacă este prezentă, rotește imaginea în unghiul corespunzător. Păstrarea imaginii meta informații sunt șterse și, prin urmare, chiar dacă tag-ul de orientare exif nu a fotoapparatny (3, 6, 8) și reflectate (2, 4, 5, 7). Această imagine va fi așa cum este și, dacă este necesar, moderatorii vor putea să o transforme așa cum au nevoie.
O astfel de funcție simplă a rezolvat această greșeală insidioasă.
Pentru o mai mare claritate, oferim un exemplu de decupare incorectă a imaginilor datorită caching-ului, precum și a diferitelor comportamente de imagine cu orientare exif și fără. Ca imaginea originală vom folosi faimoasa Lena. dar pentru modificări mai vizibile, versiunea sa canonică nu este de 512x512, ci o imagine dreptunghiulară. Pentru a lucra cu informații exif, utilizați exiftoolul utilitarului de consolă.
Să luăm o imagine orientată spre portret și să încercăm să o decupăm de două ori pe aceeași imagine de previzualizare.
Moderatorul taie imaginea, apoi după ce pagina revine, același preview este încărcat din nou. Moderatorul taie imaginea a doua oară, gândindu-se în același timp că schimbările din anumite motive nu au fost păstrate.
Dar, de fapt, imaginea a fost decupată corect pentru prima dată.
După ce ați primit coordonate repetate pentru decuparea imaginii, apar următoarele:
Și așa mai departe, cu fiecare tăiere ulterioară, imaginea originală va continua să fie mărunțită. Prin urmare, parametrul GET aleator vă permite să vă ocupați de cache și să încărcați previzualizările necesare pentru o prelucrare corectă a imaginilor.
Să creați imaginea originală, cu raportul de aspect peisaj, fără eticheta de orientare dată.
Afișăm informațiile meta din această imagine.
Copiați imaginea și setați eticheta de orientare 6.
Acum să vedem ce informații meta conținute în această imagine.
După cum puteți vedea, eticheta de orientare este setată la Rotire 90 CW.
Încărcarea datelor de imagine în serviciu - puteți vedea un comportament diferit:
Imagine fără orientare a tag-ul nu este rotită și afișată așa cum este. cu raport de aspect peisaj.
Imaginea cu eticheta de orientare când este afișată este rotită într-un raport de aspect portret.
Cea de-a doua imagine arată așa cum ar trebui și moderatorul tăie imaginea fără nici o îndoială.
Decuparea imaginii așa cum se arată în figura de mai sus, moderatorul se așteaptă să obțină următorul rezultat.
Cu toate acestea, deoarece coordonatele sunt setate pentru orientare portret, iar imaginea în sine are dimensiuni de peisaj, rezultatul este neașteptat. Imaginea se rotește și în partea inferioară a imaginii apare o bară neagră.
După ce utilizați rotația preliminară a imaginii și ștergeți informațiile meta, acest comportament neașteptat dispare, imaginea este afișată așa cum este. Încărcarea unei imagini cu eticheta de orientare, atunci când o salvați pe server, rămâne imediat rotită.
De exemplu, dacă moderatorul întrerupe imaginea portretului.
El obține rezultatul portret corect.
Trimiteți-le prietenilor: