美文网首页
WKWebView关于加载SVG图像的思考

WKWebView关于加载SVG图像的思考

作者: 一个不太努力的代码搬运工 | 来源:发表于2021-10-02 16:26 被阅读0次
前言

最近项目需要加载网络SVG 图像,但是用了一些第三方库效果都很差。大家可以试试加载下面的svg。

SVG SVG

swiftSVG 不支持 
SVGKit 不显示背景色
SnowFlake  显示背景色,不显示文字
Macaw 不显示背景色,展示不全
SwiftDraw 解析错误
SDWebImageSVG 展示不全
pocketSVG 颜色不支持'black',崩溃

这些库加载出来的效果和在浏览器的效果是不一样的,但是这些SVG在安卓上是解析的很好的,我也参考了两个竞品app,发现他们的列表页是不展示的,但是在详情页是展示的,所以我怀疑他们的详情页是用webVIew加载的。

列表页
详情页

但是使用webview加载图像并没有居中平铺

image.png

关于让SVG居中平铺显示参考的是Stack Overflow上一个用户的回答
#WKWebView content is not centered in iOS

通过前端同学的帮助将这个代码改良了一下,通过url加载SVG

NSString *htmlStr = @"<!DOCTYPE html><html><head><meta charset=\"utf-8\"><meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\"><title></title><style type=\"text/css\">html,body {height: 100%;}body {display: flex;justify-content: center;align-items: center;background: url('@') no-repeat center center/contain;}svg {height: 300px;}</style></head><body></body></html>";
NSString *svgHtml = [htmlStr stringByReplacingOccurrencesOfString:@"@" withString:image_url];
题外话
  • 直接使用SDWebImage(因为我们的列表中大部分都是png jpg的图片,只有少部分是SVG)下载svg,然后将xml代码加到HTML body里是否可以?答: 不完全可以。因为有几个SVG的代码放到body里就只能显示文字,例如

    这个 这个SVG可以在SVGKit中找到
  • 因为还有分享功能,那么WKWebView怎么截屏?用UIGraphicsBeginImageContextWithOptions是绘制不出来的,需要使用 takeSnapshotWithConfiguration

#pragma mark -- WKNavigationDelegate 网页加载完成
- (void)webView:(WKWebView *)webView didFinishNavigation:(WKNavigation *)navigation {
    // 对webview绘制图片,赋值给要分享的imageView中,不然分享还得等webview加载完
    // 这里设置延迟,防止webview还没显示完
    dispatch_after(dispatch_time(DISPATCH_TIME_NOW, (int64_t)(0.1 * NSEC_PER_SEC)), dispatch_get_main_queue(), ^{
        WKSnapshotConfiguration *snapConfig = [[WKSnapshotConfiguration alloc] init];

        [webView takeSnapshotWithConfiguration:snapConfig completionHandler:^(UIImage * _Nullable snapshotImage, NSError * _Nullable error) {
            self.webViewImage = snapshotImage;
        }];
    });
}

相关文章

网友评论

      本文标题:WKWebView关于加载SVG图像的思考

      本文链接:https://www.haomeiwen.com/subject/fpipnltx.html