Wie lädt man schnell eine Version mit niedrigerer Auflösung eines Bildes für ein Thumbnail? Oder einfach, wie erstellt man am besten ein Thumbnail-Bild?
Viele Apps, wie z. B. Tweetbot, zeigen Thumbnails in ihren Tabellenansicht-Controllern für ein Bild mit einer viel höheren Auflösung an.
Dieses Bild zeigt beispielsweise ein Miniaturbild, das bei Antippen das größere Bild zeigt:
Ich bin sehr verwirrt, wie diese Bilder geladen sind. Mein Gedanke wäre, dass das Originalbild geladen und dann auf die Miniaturansicht verkleinert und angezeigt wird. Ich kann es jedoch kaum glauben, da das Bild eine ziemlich lange Zeit benötigt, um mit voller Auflösung geladen / heruntergeladen zu werden. Das für jedes einzelne Bild zu tun, nur um es zu verkleinern, scheint eine ziemlich lange Zeit zu dauern. Aber diese scheinen sehr schnell zu laden.
Ich bin auch skeptisch, wenn man dann auf das Bild tippt, dauert es eine Sekunde, bis das volle Auflösungsbild angezeigt wird, was mich zu der Annahme verleitet, dass sie die volle Auflösung heruntergeladen haben, bevor sie zwischengespeichert wird wird sofort geladen, wenn der Benutzer darauf tippt.
Ich bin also gespannt, wie genau man ein ähnliches Thumbnail-System wie in dieser App erreichen würde. Bei einem Link zu einem Bild, wie dem oben gezeigten Bild, wie würde ich das Bild sehr schnell unter der URL aufnehmen und es als Thumbnail darstellen ?
9 Antworten
Normalerweise gibt es 2 Bilder, die vom Server und nicht vom Client erstellt wurden. Der Server stellt 2 URLs zum Abrufen der Bilder zur Verfügung, eines für das Thumbnail und eines für das Vollbild Was passiert in 90% der Anwendungen)), so dass Ihr UIImageView ((oder wer auch immer verantwortlich ist)) soll das Thumbnail laden, dann laden Sie das Bild mit voller Auflösung, und cache das letztere, so dass, wenn Sie darauf klicken Es öffnet sich schnell. Jetzt gibt es viele Fälle:
- Der Server ist wirklich blitzschnell und Sie sind mit einem schnellen WLAN verbunden, so dass die Anwendung das Bild schnell laden kann
- Die Bildgröße ist nicht wirklich groß, daher dauert das Laden des vollständigen Res-Bildes sowieso nicht lange. Sie werden schließlich auf einem Telefon angezeigt.
Wenn Sie erreichen möchten, was Sie erwähnt haben, kann Ihnen diese Bibliothek sehr helfen.
Wenn Sie das Gerät schrumpfen lassen (d. h. der Server stellt keine kleinere Version bereit), möchten Sie wahrscheinlich zuerst das Laden und Aufblasen des Vollbilds im Speicher vermeiden. (Die meisten anderen Antworten deuten darauf hin.)
Stattdessen können Sie mit der Methode CGImageSourceCreateThumbnailAtIndex direkt aus den ursprünglichen (komprimierten) Daten eine Miniaturansicht erstellen, ohne sie zuerst zu erweitern (indem Sie sie in eine CGImageSource einbetten). Ein vollständiges Beispiel finden Sie in Apples Image I / O-Programmierhandbuch unter Erstellen eines Miniaturbilds aus einer Bildquelle .
Für kleinere Quellbilder hat dies wahrscheinlich keine großen Auswirkungen, aber für einen großen kann es sehr hilfreich sein, besonders beim Speicherverbrauch.
Es ist wahrscheinlich für jede Anwendung anders.
Im Fall von Tweetbot holen sie fast immer das Thumbnail von den Twitter-Servern und holen die volle Res nur dann, wenn sie auf das Thumbnail tippen. In diesem Sinne ist es nur eine andere URL und Twitter tut die thumbnailing.
Apps können das auch lokal tun. Apples Photos-App und Camera Roll erstellen Miniaturansichten, sobald Sie ein Foto aufnehmen, und speichern diese lokal in der Sammlungsansicht, um Speicher zu sparen. Nur wenn Sie darauf tippen, wird das Bild mit voller Auflösung aus dem Speicher geladen. Es gibt sogar Beweise und Präzedenzfälle, dass sie das Bild mit voller Auflösung nicht sofort laden, sondern nur ein Bild laden, das für die Bildschirmgröße notwendig ist, bis Sie das Einzoomen und dann das Austauschen für ein anderes Bild vornehmen.
Grundsätzlich gibt es viele einfache Techniken, die eine schnelle Google zeigen wird, um ein Bild im Code thumbnail. Die Methode jeder Anwendung ist jedoch spezifisch für ihren einzigartigen Benutzerfluss.
Wahrscheinlich handelt es sich um separate Bilder (die Miniaturansichten), die durch Ändern der Größe des ursprünglichen Bildes mit voller Auflösung erstellt und dann separat vom Bild mit voller Auflösung gespeichert wurden - der Grund dafür, dass die Miniaturbilder sehr schnell zu laden scheinen. Ich habe eine Anwendung geschrieben, die etwas Ähnliches tut (obwohl sie sowohl das Thumbnail als auch das Vollbild lokal speichert). Dies ist der Code -
%Vor%dann, um das Vorschaubild zu laden
%Vor%Wenn das Miniaturbild angetippt wird, wird das vollständige Bild geladen
Also ich bin gespannt wie genau man ein ähnliches Thumbnail erreichen würde System wie in dieser App. Eine Verbindung zu einem Bild, wie dem gezeigten, gegeben Wie würde ich im obigen Bild sehr schnell das Bild an der URL aufnehmen? und präsentiere es als Thumbnail?
Ich würde vorschlagen, FilePicker in Ihrer App zu verwenden.
Sagen Sie zum Beispiel, dass das Bild in voller Größe unter
gespeichert wird %Vor%Sie können eine zugeschnittene Version über die URL
aufrufen %Vor%Sie erstellen diese URL also einfach dynamisch im Code, damit sie Ihren Anforderungen entspricht.
Hier ist ein Beispiel dafür mit Thumbnails von der Filepicker-Seite. Hier verlinken: Ссылка
Logischerweise sollten Sie eine Version mit niedriger Auflösung auf dem Server haben, und Sie können diese herunterladen, um eine Miniatur mit folgendem Code zu erstellen. Noch bessere Option ist es, Thumbnails auf dem Server zu haben.
Sie können den folgenden Code verwenden, um ein Aspekt-passendes Miniaturbild zu erstellen.
%Vor%Rufen Sie fitImage auf: mit der gewünschten Größe des Vorschaubildes, das Sie erzeugen möchten.
1 Lösung einige der App verwendet hat 2 Versionen von Bild 1 ist hohe Auflösung zweite ist von geringer Auflösung thumbnail .. thumbnail heruntergeladen, wenn der Benutzer auf das Thumbnail-Bild klickt, dehnt es das Bild mit niedriger Auflösung auf die große Größe und starten Herunterladen des Bildes mit hoher Auflösung im Hintergrund. Sobald der Download der hochauflösenden Bilder abgeschlossen ist, wird das Thumbnail mit niedrigerer Auflösung durch das Bild mit hoher Auflösung in der Bildansicht ersetzt.
Eine andere Lösung besteht darin, die Miniaturbilder zuerst herunterzuladen und im Hintergrund den Download der hochauflösenden Bilder zu starten, so dass die Benutzer beim Anklicken eines Thumbnails wahrscheinlich ein gespeichertes Bild der hohen Auflösung aus dem Speicher erhalten.
Sie können also leicht eine kleinere Version des großen Bildes erstellen und zwischenspeichern. Es gibt mehrere Möglichkeiten, dies zu tun. Beachten Sie, dass CGContextDrawImage(CGContextRef c, CGRect rect, CGImageRef image) entsprechend skaliert wird. Sie möchten diese Live-Skalierung nicht jedes Mal am wahrscheinlichsten machen, also sollten Sie in CGBitmapContext zeichnen und diese dann zwischenspeichern.
Entlang dieser Zeilen könntest du feststellen, dass Path in der Bibliothek, die sie vor Kurzem veröffentlicht haben, die meiste schwere Arbeit für dich erledigt hat: Ссылка
Es scheint Potenzial aus der Dokumentation zu haben (obwohl ich den Code noch nicht untersucht habe). Es scheint, dass es Ihren Block aufrufen wird, um das Bild in ihren Cache zu zeichnen. Ein einfaches Zeichnen in der Größe, die sie angeben, reduziert es und speichert es im Cache.
Verwenden Sie FastImageCache.
Es ist who-hoo! schnell.
(Bei der Anzeige der Vorschaubilder, die einmal für seidenweiches Scrollen gespeichert wurden, ist es nicht besonders magisch, das erste Vorschaubild schneller anzeigen zu lassen. Wie bereits von anderen Personen gezeigt, ist die einzige Möglichkeit, eine Vorschau mit niedriger Auflösung zu speichern. )
Tags und Links objective-c ios uiimageview uiimage nsdata