从iOS Swift下载SVG图像
从iOS Swift下载SVG图像
提问于 2022-11-14 06:45:44
我正在做一个从API中获取数据的项目，在这个API中，我得到了图像的url。但这些图像不是PNG、JPEG或JPG格式。它们是SVG(可缩放矢量图形)图像。因此，据我所知，没有直接的方法、函数或可能存在iOS项目框架库来呈现SVG图像。因此，我们有一堆用于渲染这些图像的Pods，like(SDWebImage，SDWebImageSVGCoder，SDWebImageSVGKitPlugin，，，SVGKit，)。我把它们都用了，但这些都解决不了我的问题。所以让我们来讨论一下我现在面临的问题。
，这是我的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图像，实际上，其中一些是Raster图像。这是我分享两种图像类型的数据。
那些已成功呈现的图像具有类似于此的数据
<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
}
}
})
}
}
}
}
}我只想解决我的问题，把我的自定义代码放入库，因为我不知道目标C和SDWebImageSVGCoder pod是写在目标C。如果这是不可能的，那么请给我一个建议，或任何其他库荚我使用和解决我的问题，并显示我的列表如下。
回答 1
Stack Overflow用户
回答已采纳
发布于 2022-11-14 11:34:47
我会用一个定制的解码器。一旦完成，您可以使用：
self.bankLogoImageView.sd_setImage(with: url,
placeholderImage: nil,
context: [.imageCoder: CustomSVGDecoder(fallbackDecoder: SDImageSVGCoder.shared)])我把它命名为CustomSVGDecoder，但是由于它是PNG/JPG解码，所以它可能有一个更好的名称。我没有检查，但我想，您得到的自定义SVG使用了一些SVG功能，并在其中包含了一个非矢量图像，但您目前只是使用非矢量图像。
为了避免检查，我给它提供了来自SDWebImageSVGDecoder的默认SDWebImageSVGDecoder的回退解码器。
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
}
}我使用regex查找Base64内容，它可能需要一些修改。您可以在range(of:)中使用自己的版本。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/74427783
复制相关文章
相似问题
腾讯云开发者
