在iOSSwift中下載SVG影像

我正在做一個專案，我正在從 API 獲取資料，在該 API 中我正在獲取影像的 url。但這些影像不是PNG、JPEG或JPG格式。它們是 SVG（可縮放矢量圖形）影像。因此，據我所知，不存在用于呈現SVG影像的直接方法、函式或 iOS 專案框架庫。所以我們有一堆 Pod 實際上用于渲染這些影像，如（SDWebImage、SDWebImageSVGCoder、SDWebImageSVGKitPlugin、SVGKit）。我全部使用了它們，但所有這些 Pod 都沒有解決我的問題。那么讓我們討論一下我現在面臨的問題。

這是我的 ViewController 類代碼

import SDWebImageSVGCoder

class ViewController: UIViewController {
    
    var banks: [Bank] = [Bank(logo:"https://identity.moneyhub.co.uk/bank-icons/default",name:"Dummy"),
        Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/accord", name: "Accord Mortgages"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/ajBell", name: "AJ Bell"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/aldermore", name: "Aldermore"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/amex", name: "American Express"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/brewinDolphin", name: "Brewin Dolphin"),
                           Bank(logo: "https://identity.moneyhub.co.uk/bank-icons/caxton", name: "Caxton"),]
    
    
    @IBOutlet weak var tableView: UITableView!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        setupTableView()
    }
    
    func setupTableView() {
        self.tableView.delegate = self
        self.tableView.dataSource = self
    }

}

//MARK: - TABLEVIEW DELEGATE DATASOURCE
extension ViewController: UITableViewDelegate, UITableViewDataSource {
    
    func numberOfSections(in tableView: UITableView) -> Int {
        return 1
    }
    
    func tableView(_ tableView: UITableView, numberOfRowsInSection section: Int) -> Int {
        return banks.count
    }
    
    func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
        let cell = tableView.dequeueReusableCell(withIdentifier: BankTableViewCell.identifier, for: indexPath) as! BankTableViewCell
        cell.configure(self.banks[indexPath.row])
        return cell
    }
    
    func tableView(_ tableView: UITableView, heightForRowAt indexPath: IndexPath) -> CGFloat {
        return 62
    }
    
    func tableView(_ tableView: UITableView, didSelectRowAt indexPath: IndexPath) {
        
    }
    
}

我的 TableViewCell 類

class BankTableViewCell: UITableViewCell {
    
    @IBOutlet weak var bankNameLabel: UILabel!
    @IBOutlet weak var bankLogoImageView: UIImageView!
    
    class var identifier: String {
        return "BankTableViewCell"
    }
    
    func configure(_ bank: Bank) {
        self.bankNameLabel.text = bank.name
        guard let url = URL(string: bank.logo) else {return}
        self.bankLogoImageView.sd_setImage(fromURL: url)
    }
    
}

但是，當我運行此代碼時，只有 3 個影像渲染第一個是虛擬或默認情況，但其余三個不渲染。然后我嘗試找出問題所在，然后我發現并非所有影像都是真正的 SVG 影像，實際上其中一些是光柵影像。這是我共享兩種影像型別的影像的資料。

那些渲染成功的Images有這樣的資料

<svg viewBox="-25 -25 200 200" xmlns="http://www.w3.org/2000/svg">
    <path d="M138.299 130.707H10.644a6.386 6.386 0 00-6.384 6.391 6.384 6.384 0 006.384 6.384h127.652a6.384 6.384 0 006.384-6.384c-.002-3.532-2.86-6.391-6.381-6.391zM18.621 114.101c-3.526 0-6.384 2.859-6.384 6.388s2.858 6.391 6.384 6.391h111.697c3.526 0 6.384-2.861 6.384-6.391s-2.858-6.388-6.384-6.388h-1.593V56.625h1.593a3.19 3.19 0 000-6.38H18.621a3.19 3.19 0 000 6.38h1.597v57.472h-1.597v.004zm97.336-57.476v57.472H96.81V56.625h19.147zm-31.917 0v57.472H64.893V56.625H84.04zm-51.06 0h19.147v57.472H32.98V56.625zM10.644 44.503H138.34a6.387 6.387 0 006.402-6.388 6.392 6.392 0 00-4.312-6.044L77.094 3.558a6.4 6.4 0 00-5.237 0L8.026 32.293a6.385 6.385 0 00-3.622 7.165 6.38 6.38 0 006.24 5.045z"/>
</svg>

但是那些沒有渲染但顯示白色或空影像的影像具有這種型別的資料

<svg width="500" height="500" viewBox="0 0 500 500" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<rect x="20" y="135" width="460" height="230" fill="url(#pattern0)"/>
<defs>
<pattern id="pattern0" patternContentUnits="objectBoundingBox" width="1" height="1">
<use xlink:href="#image0" transform="scale(0.005 0.01)"/>
</pattern>
<image id="image0" width="200" height="100" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAABkCAYAAADDhn8LAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAACBRJREF......UwT2kAAAAASUVORK5CYII="/>
</defs>
</svg>

所以運行專案后我的螢屏看起來像這樣。

我自己找到了解決方案，只需設定條件并首先檢查每個影像回應。如果影像是純粹用 SVG 撰寫的，那么我將呼叫 Pod 函式，否則我將使用我自己的自定義代碼來提取 base64Encoded 字串，然后渲染影像。但它造成了一些性能問題。如您所知，庫也在異步呼叫中作業，我也將其用于影像有時加載有時不顯示正確的影像。

我的自定義代碼在這里

class BankTableViewCell: UITableViewCell {
    
    @IBOutlet weak var bankNameLabel: UILabel!
    @IBOutlet weak var bankLogoImageView: SVGImageView!
    
    class var identifier: String {
        return "BankTableViewCell"
    }
    
    func configure(_ bank: Bank) {
        self.bankNameLabel.text = bank.name
        guard let url = URL(string: bank.logo) else {return}
        self.bankLogoImageView.loadImage(fromURL: url, placeHolderImage: "")
    }
    
}

class SVGImageView: UIImageView {
    
    private let imageCache = NSCache<AnyObject, UIImage>()
    
    func loadImage(fromURL imageURL: URL, placeHolderImage: String)
    {
        self.image = UIImage(named: placeHolderImage)

        if let cachedImage = self.imageCache.object(forKey: imageURL as AnyObject)
        {
            debugPrint("image loaded from cache for =\(imageURL)")
            self.image = cachedImage
            return
        }

        DispatchQueue.global().async {
            [weak self] in
            
            if let imageData = try? Data(contentsOf: imageURL) {
                guard let xmlStr = String(data: imageData, encoding: .utf8) else {
                    DispatchQueue.main.async {
                        self?.sd_setImage(with: URL(string: "https://identity.moneyhub.co.uk/bank-icons/default")!)
                    }
                    return
                }
                print(xmlStr)
                if let range = xmlStr.range(of: "data:image/png;base64,") {
                    let base64StringWithoutfilter = xmlStr.suffix(from: range.upperBound)
                    let base64StringWithoutfilterRange = base64StringWithoutfilter.range(of: "/>")
                    
                    let lowerRange = range.upperBound
                    if let upperRange = base64StringWithoutfilterRange?.upperBound {
                        let base64ImageString = xmlStr[lowerRange..<upperRange].dropLast(3)
                        if let imageData = NSData(base64Encoded: String(describing:base64ImageString)) {
                            if let image = UIImage(data: imageData as Data) {
                                DispatchQueue.main.async {
                                    self?.image = image
                                    return
                                }
                            }
                        }
                    }
                } else {
                    self?.sd_setImage(with: imageURL,completed: { image, error,cache, url in
                        if let image = image {
                            DispatchQueue.main.async {
                                self?.image = image
                                return
                            }
                        }
                    })
                }
            }
        }
    }
}

我只是想解決我的問題，將我的自定義代碼放入庫中，因為我不知道 Objective C 和 SDWebImageSVGCoder pod 是用 Objective C 撰寫的。如果這不可能，請給我一個建議，或任何其他庫 pod 任何東西我使用它來解決我的問題并顯示我的串列，如下所示。

uj5u.com熱心網友回復：

我會使用自定義解碼器。完成后，您可以呼叫它：

self.bankLogoImageView.sd_setImage(with: url,
                                   placeholderImage: nil,
                                   context: [.imageCoder: CustomSVGDecoder(fallbackDecoder: SDImageSVGCoder.shared)])

我將它命名為CustomSVGDecoder，但由于它是 PNG/JPG 解碼，它可能有一個更好的名字。我沒有檢查，但我想，您獲得的自定義 SVG 使用了一些 SVG 功能，并在其中包含了一個非矢量影像，但您目前只使用非矢量影像。

SDWebImageSVGDecoder為了避免檢查，我給了它默認 SVGDecoder 的回退解碼器。

class CustomSVGDecoder: NSObject, SDImageCoder {

    let fallbackDecoder: SDImageCoder?

    init(fallbackDecoder: SDImageCoder?) {
        self.fallbackDecoder =  fallbackDecoder
    }

    static var regex: NSRegularExpression = {
        let pattern = "<image.*xlink:href=\"data:image\\/(png|jpg);base64,(.*)\"\\/>"
        let regex = try! NSRegularExpression(pattern: pattern, options: [])
        return regex
    }()

    func canDecode(from data: Data?) -> Bool {
        guard let data = data, let string = String(data: data, encoding: .utf8) else { return false }
        guard Self.regex.firstMatch(in: string, range: NSRange(location: 0, length: string.utf16.count)) == nil else {
            print("CustomSVGDecoder: We can decode")
            return true //It self should decode
        }
        guard let fallbackDecoder = fallbackDecoder else {
            print("CustomSVGDecoder: Can't decode and there is no fallBack decoder")
            return false
        }
        print("CustomSVGDecoder: Will rely on fallback decoder to decode")
        return fallbackDecoder.canDecode(from: data)
    }

    func decodedImage(with data: Data?, options: [SDImageCoderOption : Any]? = nil) -> UIImage? {
        guard let data = data,
                let string = String(data: data, encoding: .utf8) else { return nil }
        guard let match = Self.regex.firstMatch(in: string, range: NSRange(location: 0, length: string.utf16.count)) else {
            print("CustomSVGDecoder: Will rely on fallback decoder to decode because of no match")
            return fallbackDecoder?.decodedImage(with: data, options: options)
        }
        guard let rawBase64DataRange = Range(match.range(at: 2), in: string) else {
            print("CustomSVGDecoder: Will rely on fallback decoder to decode because we didn't fiund the base64 part")
            return fallbackDecoder?.decodedImage(with: data, options: options)
        }
        let rawBase64Data = String(string[rawBase64DataRange])
        guard let imageData = Data(base64Encoded: Data(rawBase64Data.utf8), options: .ignoreUnknownCharacters) else {
            print("CustomSVGDecoder: Will rely on fallback decoder to decode because of invalid base64")
            return fallbackDecoder?.decodedImage(with: data, options: options)
        }
        return UIImage(data: imageData)
    }

    //You might need to implement these methods, I didn't check their meaning yet
    func canEncode(to format: SDImageFormat) -> Bool {
        print("CustomSVGDecoder: canEncode(to:)")
        return true
    }

    func encodedData(with image: UIImage?, format: SDImageFormat, options: [SDImageCoderOption : Any]? = nil) -> Data? {
        print("CustomSVGDecoder: encodedData(with:format:options:)")
        return nil
    }
}

我使用正則運算式查找 Base64 內容，它可能需要一些修改。您可以將自己的版本與range(of:).

標籤：ios迅速svg用户界面图像视图sdweb图像

上一篇：你如何處理UTF8緩沖區？

下一篇：如何從DoctrineArrayCollection中獲取單個列？