UIImage+RoundedCorner mit SDWebImage

Question

Ich benutze SDWebImage, um Bilder in meine TableView zu laden. Ich möchte, dass die Bilder in meiner TableView verkleinert werden und abgerundete Ecken haben. Ich habe UIImage+Resize und UIImage+RoundedCorner gefunden, um dies zu tun. Beide Bibliotheken funktionieren separat gut, aber ich habe es nicht geschafft, sie zu kombinieren. Ich konnte die Größe ändern und die Ecken des von SDWebImage zurückgegebenen Bildes verändern, aber das war ziemlich ressourcenintensiv und daher möchte ich die Bilder verkleinern, bevor sie im Cache gespeichert werden. Wenn ein Bild zum ersten Mal aus dem Netz geladen wird, wird es wahrscheinlich vor dem Speichern im Cache angezeigt, daher möchte ich auch das Bild verkleinern, wenn es zum ersten Mal geladen wird.

Ich konnte das nicht tun, da ich nicht herausfinden kann, welche Methode von SDWebImage das Bild manipuliert. Alles, was ich brauche, ist, folgendes auf das richtige UIImage in SDWebImage anzuwenden.

UIImage *image = [image thumbnailImage:50 transparentBorder:0 cornerRadius:5 interpolationQuality:kCGInterpolationHigh];

Kann mir jemand sagen, wo in SDWebImage ich diesen Code platzieren soll, um das Bild zu manipulieren, bevor es im Cache gespeichert wird und ein manipuliertes Bild an die ImageView gesendet wird, wenn es aus dem Internet geladen wird und nicht aus dem Cache?

Answer 1

Für den Teil mit der Größenänderung des Bildes habe ich keine gute Antwort.

Für die Funktion mit den abgerundeten Ecken gehst du komplett in die falsche Richtung, das habe ich schon einmal versucht... habe versucht, jedes Bild zu vergrößern und abzurunden und auf der Festplatte zu speichern...... zu komplex, zu viele Dinge zu tun...

Der richtige und einfache Weg ist, den cornerRadius des UIImageView Ihrer Tabellenzelle festzulegen:

cell.imageView.layer.cornerRadius = 8;
cell.imageView.layer.masksToBounds = YES;

Answer 2

Ich habe das herausgefunden.

Sie sollten das Bild in den folgenden Methoden in SDImageCache.m manipulieren:

1. - (void)storeImage:(UIImage *)image forKey:(NSString *)key;
2. - (void)storeImage:(UIImage *)image forKey:(NSString *)key toDisk:(BOOL)toDisk;
3. - (void)storeImage:(UIImage *)image imageData:(NSData *)data forKey:(NSString *)key toDisk:(BOOL)toDisk;

In der dritten Methode müssen Sie daran denken, Ihr UIImage in NSData umzuwandeln und den folgenden Code zu verwenden. Dies sollte erfolgen, wenn toDisk true ist.

NSData *croppedRoundedImageData = UIImageJPEGRepresentation(croppedRoundedImage, 1.0);
if (croppedRoundedImageData) data = croppedRoundedImageData;

Wenn Sie if (croppedRoundedImageData) data = croppedRoundedImageData; verwenden, wird Ihre App nicht abstürzen, wenn Ihre Daten NULL sind, wenn Sie versuchen, sie zu speichern.

In SDWebImageDownloader.m müssen Sie Ihren Code für die Manipulation in - (void)connectionDidFinishLoading:(NSURLConnection *)aConnection hinzufügen. Dies wird für das erste Laden des Bildes verwendet (wenn es nicht im Cache ist).

Answer 3

Das SDWebImageManagerDelegate-Protokoll ist das, wonach Sie suchen.

https://github.com/rs/SDWebImage/blob/master/SDWebImage/SDWebImageManager.h#LC96

Ich habe die Methode, die wir benötigen, in meiner AppDelegate-Klasse implementiert.

#pragma mark - SDWebImageManagerDelegate

-(UIImage*) imageManager:(SDWebImageManager *)imageManager transformDownloadedImage:(UIImage *)image withURL:(NSURL *)imageURL{

    UIGraphicsBeginImageContextWithOptions(image.size, NO, [UIScreen mainScreen].scale);

    CGRect box = CGRectMake(0, 0, image.size.width, image.size.height);
    // Fügen Sie vor dem Zeichnen einer abgerundeten Ecke einen Ausschnitt hinzu
    [[UIBezierPath bezierPathWithRoundedRect:box
                                cornerRadius:15.f] addClip];
    // Zeichnen Sie Ihr Bild
    [image drawInRect:box];

    // Das Bild erhalten, hier wird das UIImageView-Bild festgelegt
    UIImage* ret = UIGraphicsGetImageFromCurrentImageContext();

    // Lassen Sie uns vergessen, dass wir etwas gezeichnet haben
    UIGraphicsEndImageContext();
    return ret;

}

Sie können dem sharedManager mitteilen, dass er Ihren Delegaten verwenden soll, indem Sie dies tun.

SDWebImageManager* imageManager = [SDWebImageManager sharedManager];
imageManager.delegate = self;

Ich habe dies in didFinishLaunchingWithOptions gemacht.

Beachten Sie, dass dieser Ansatz entlang der Grenzen des Bildes in seiner nativen Größe beschnitten wird. Wenn die Grenzen Ihres Bildes außerhalb der Grenzen Ihrer Ansicht rendern (aspect-fill, etc.), sehen Sie die abgerundeten Ecken nicht.

Dieser Ansatz ist performanter als das Zuschneiden des Bildes jedes Mal, wenn es gerendert wird, aber seien Sie sich des oben genannten Nachteils bewusst.

Answer 4

Dies ist ein toller Fund, aber ich finde, dass das Hinzufügen Ihres Bildmanipulationscodes in SDWebImageDownloader.m Miniaturansichten für alle Bilder erstellt, die SDWebImage verwenden. Was ich getan habe, war, eine SDWebImageManager-Instanz zu erstellen und die Methode zu verwenden:

- (void) webImageManager:(SDWebImageManager *)imageManager didFinishWithImage:(UIImage *)image; 

um die Bilder zu erstellen. Das einzige Problem ist, dass die Bilder zu unterschiedlichen Zeiten ankommen, und ich versuche einen Weg zu finden, um sie ordnungsgemäß mit einer Aktion zu verknüpfen.

Trotzdem eine tolle Antwort.

Answer 5

Ich benutze das SDWebImage-Framework, das mir nicht die Möglichkeit gibt, die Dateien zu ändern, aber ich habe eine globale Funktion wie diese:

     + (UIImage*)circleImageWithImage:(UIImage*)image
      {
          UIImageView* imageView = [[UIImageView alloc] initWithImage:image];
          CALayer *layer = [imageView layer];
          [layer setMasksToBounds:YES];
          [layer setCornerRadius:imageView.frame.size.width / 2];

          UIGraphicsBeginImageContext(image.size);
          [layer renderInContext:UIGraphicsGetCurrentContext()];
          UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
          UIGraphicsEndImageContext();
          return newImage;
      }

und eine globale Funktion zum Skalieren des Bildes wie diese:

      + (UIImage*)imageWithImage:(UIImage*)image scaledToSize:(CGSize)newSize;
      {   
          UIGraphicsBeginImageContext(newSize);
          [image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
          UIImage* newImage = UIGraphicsGetImageFromCurrentImageContext();
          UIGraphicsEndImageContext();
          return newImage;
      }