支持图片自动裁剪（CDN）-WebImageView

背景

客户端往往存在大量需要显示网络图片的场景，如果内容服务器不经过处理，直接下发原始图片给客户端，会造成严重的网络资源和内存资源的浪费，还会影响性能，造成卡顿，尤其是在瀑布流中。

假设模板封面图片是4K图片，原始大小30M。内容服务器可能分发几百上千个模板给客户端，客户端在模板列表中展示时，会耗费巨量流量，内存也会极度膨胀，可想而知这会带来怎样一种灾难。

所以最优的做法是，内容服务器只下发合适大小的图片。问题是，内容服务器并不知道合适的大小是多少，因此需要客户端在请求中同时带上需要的大小。

自动计算大小

有时候，计算合适的大小并不是一件简单的事情：

CGFloat height = self.view.height - 20 - 87 - 102 - BBStudioPossibleExtraHeightForHomeIndicator - BBStudioPossibleExtraHeightForStatusBar - 44;
CGFloat wide = height / 1.5;
[self.coverImgView bbs_setImageWithString:self.dataSource.materialInfoList.firstObject.fontPreviewUrl ptSize:CGSizeMake(wide, height)];

当你使用WebImageView后，你只需要这样做：

self.coverImgView.urlString = self.dataSource.materialInfoList.firstObject.fontPreviewUrl;

看到代码中很多同学为了逃避相关计算，或者没有意识到ptSize重要性，直接将ptSize设置成0，采用WebImageView后可以避免这种问题。

除了自动计算大小之外，WebImageView还帮我们做了其他几件事情：

占位图 - placeholderImage

使用bbs_setImageWithString，为了使用默认占位图，存在大量重复代码，下图截取了一部分：

使用WebImageView后，如果你使用默认占位图，你什么都不需要做。

这样也避免了漏写占位图，导致图片加载完成之前，显示空白，影响用户体验的问题。

如果你不想使用默认占位图，也只需要一行代码：

self.coverImg.placeholderImage = BBS_DEFAULT_TV_IMAGE(CGSizeMake(56, 56));

淡入效果

使用bbs_setImageWithString，为了实现淡入效果，需要实现一个block，非常不直观。当多处都需要淡入效果时，还容易造成大量代码重复：

@weakify(self);
 [self.coverImg bbs_setImageWithString:mediaSource.coverUrl
                                ptSize:CGSizeMake(56, 56)
                      placeholderImage:BBS_DEFAULT_TV_IMAGE(CGSizeMake(56, 56))
                               options:0
                             completed:^(UIImage *image, NSError *error, BFCWebImageCacheType cacheType, BFCWebImageStage stage, NSURL *imageURL) {
                                         @strongify(self);
                                         if (!error) {
                                             if (cacheType == BFCWebImageCacheNone) {
                                                 self.coverImg.alpha = 0.0;
                                                 [UIView animateWithDuration:0.3
                                                                  animations:^{
                                                                      self.coverImg.alpha = 1;
                                                                  } completion:^(BOOL finish) {
                                                                  }
                                                ];
                                             }       
                                        }
                                     }
];

使用WebImageView后，你只需要在初始化时加一行：

_coverImg.isFadeIn = YES;

整体对比

源码

import UIKit
import srcs_base_BFC_Image_BFCWebImageWrapper_bfcwebimagewrapper_library

@objc
open class WebImageView: UIImageView {
    @objc public var urlString: String? {
        didSet {
            if urlString != oldValue {
                setNeedsReloadImage()
            }
        }
    }
    @objc public var placeholderImage: UIImage? = UIImage(named: "bbs_default_placeholder_img")
    @objc public var options: BFCWebImageOptions = BFCWebImageOptions(rawValue: 0)
    @objc public var fixedImageSize: CGSize = .zero
    @objc public var isFadeIn = false
    
    private var needReloadImage = true
    
    public init(urlString: String? = nil, placeholderImage: UIImage? = nil, fixedImageSize: CGSize = .zero) {
        self.urlString = urlString
        self.placeholderImage = placeholderImage
        self.fixedImageSize = fixedImageSize
        
        super.init(frame: .zero)
    }
    
    public override init(frame: CGRect) {
        super.init(frame: frame)
    }
    
    required public init?(coder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }
    
    open override func layoutSubviews() {
        super.layoutSubviews()
        reloadImageIfNeeded()
    }
    
    @objc
    open func setNeedsReloadImage() {
        needReloadImage = true
        setNeedsLayout()
    }
    
    @objc
    open func reloadImageIfNeeded() {
        guard needReloadImage else { return }
        
        guard let urlString = urlString, let url = URL(string: urlString) else { return }
        
        needReloadImage = false
        bfc_setImage(with: url, ptSize: getImageSize(), placeholderImage: placeholderImage, options: options) { _, error, cacheType, _, _ in
            if self.isFadeIn, error == nil, cacheType == .none {
                self.alpha = 0.0
                UIView.animate(withDuration: 0.3) {
                    self.alpha = 1.0
                }
            }
        }
    }
    
    private func getImageSize() -> CGSize {
        if fixedImageSize != .zero {
            return fixedImageSize
        } else {
            return self.frame.size
        }
    }
}