swift 如何从URL加载SVG文件并将其用作UIImage?

oaxa6hgo  于 2023-05-05  发布在  Swift
关注(0)|答案(2)|浏览(333)

随着Xcode 12版本的发布,现在支持SVG资产。

如果我想在我的资产目录中使用SVG,这是可以的。但它不工作时,我试图从一个网址加载它的任何想法?

let downloadURL = URL.init(string:"https://www.flaticon.com/svg/static/icons/svg/3874/3874453.svg")
image.af.setImage(withURL: downloadURL!,imageTransition: .crossDissolve(0.5))
7fyelxc5

7fyelxc51#

首先,你对你想使用的框架的描述非常不清楚。很难想象image.af.setImage是什么。
有第三方框架支持SVG,例如https://github.com/mchoe/SwiftSVG
但我假设您对SDK解决方案感兴趣。
第二,你应该定义一下“资产”是什么意思。通常,在Xcode中,资产是内置到app中的资源文件,所以不需要从URL下载。

1.使用WebKit可以轻松加载SVG:

let path = "https://www.flaticon.com/svg/static/icons/svg/3874/3874453.svg"
let webView = WKWebView(frame: view.bounds)
let request = URLRequest(url: URL(string: path)!)
webView.load(request)
view.addSubview(webView)

2.如果您考虑的是WebKit以外的框架,可以将该镜像作为Data加载,然后将该Data传递给您的框架:

let path = "https://www.flaticon.com/svg/static/icons/svg/3874/3874453.svg"
let data = try! Data(contentsOf: URL(string: path)!)

3.您可以将SVG保存为“资源”,并加载该本地资源。这是最好的方法

let path = Bundle.main.path(forResource: "3874453", ofType: "svg")!
let webView = WKWebView(frame: view.bounds)
let request = URLRequest(url: URL(fileURLWithPath: path)!)
webView.load(request)
view.addSubview(webView)

完整的代码看起来像这样:

import UIKit
import WebKit

class ViewController: UIViewController {

    override func viewDidLoad() {
        super.viewDidLoad()
        
        let webView = WKWebView(frame: view.bounds)
        let request = URLRequest(url: svgUrlLocal)
        //let request = URLRequest(url: svgUrlRemote)
        webView.load(request)
        view.addSubview(webView)
    }
    
    var svgUrlLocal: URL {
        let path = Bundle.main.path(forResource: "3874453", ofType: "svg")!
        return URL(fileURLWithPath: path)
    }
    
    var svgUrlRemote: URL {
        let path = "https://www.flaticon.com/svg/static/icons/svg/3874/3874453.svg"
        return URL(string: path)!
    }
}

您可以在这里下载该项目:https://github.com/gatamar/stackoverflow_answers/tree/master/so65266899

6tqwzwtp

6tqwzwtp2#

实际上,我们可以使用Web视图从SVG数据创建UIImage。这个类已经过彻底测试,工作得非常好。
这行代码将演示它是多么容易使用。
数据是SVG数据。URL是SVG的服务器URL。它是可选的。

SVGLoader.load(data: data, url: urlS) { image in
                       
 }

import Foundation
import WebKit

class SVGLoader {
    typealias wkType = (data: Data, complition: ((UIImage?) -> Void)?, url: String?)
    static var wkContainer = [wkType]()
    static var wView: WKView?
    static func load(data: Data, url: String?, size: CGSize = CGSize(width: 600, height: 600), complition: @escaping ((UIImage?) -> Void)) {
        let wkData: wkType = (data, complition, url)
        wkContainer.append(wkData)
        if wView == nil {
            wView = WKView(frame: CGRect(origin: .zero, size: size))
        }
    }
    
    static func clean() {
        if wkContainer.isEmpty {
            wView = nil
        }
    }
    
    class WKView: NSObject, WKNavigationDelegate
    {
        var webKitView: WKWebView?
        init(frame: CGRect) {
            super.init()
            webKitView = WKWebView(frame: frame)
            webKitView?.navigationDelegate = self
            webKitView?.isOpaque = false
            webKitView?.backgroundColor = .clear
            webKitView?.scrollView.backgroundColor = .clear
            loadData()
        }
        
        
        func loadData() {
            let datas = SVGLoader.wkContainer
            if datas.isEmpty {
                return
            }
            guard let data = datas.first?.data else {
                return
            }
            let urlS = datas.first?.url ?? ""
            let url = URL(string: urlS) ?? (NSURL(string: "")! as URL)
            webKitView?.load(data, mimeType: "image/svg", characterEncodingName: "", baseURL: url)
        }
        
        func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
            webView.takeSnapshot(with: nil) { [weak self] image, error in
                wkContainer.first?.complition?(image)
                wkContainer.removeFirst()
                self?.loadData()
                clean()
            }
        }
    }
}

相关问题