如何使用 HTML 渲染图像，使用 Flutter 创建 iOS-App 的 CSS？
Posted
技术标签:
【中文标题】如何使用 HTML 渲染图像，使用 Flutter 创建 iOS-App 的 CSS？【英文标题】：How to render image using HTML, CSS using flutter to create iOS-App? 【发布时间】：2020-01-02 07:15:20 【问题描述】：我正在尝试使用 HTML、CSS 在 Flutter 中创建 PDF。因此，在某些情况下，我必须使用 html 和 css 呈现资产图像。
在 android 的情况下，它使用资产文件位置（如以下代码中提到的 (file:///android_asset/...)）进行渲染：
makeProfileImage()
return '<img src="file:///android_asset/flutter_assets/assets/image_name.jpg">';
如何在 iOS 中获取像 (file:///android_asset/flutter_assets/...) 这样的资产文件路径？
Future<void> printPdf() async
print('Print ...');
await Printing.layoutPdf(onLayout: (PdfPageFormat format) async
return await Printing.convertHtml(
format: PdfPageFormat.a4
.applyMargin(left: 0, top: 0, right: 0, bottom: 0),
html: '<html><head>' +
getRatingbarCss() +
'<style>.checked color: red;</style>' +
'</head><body style="margin:0;padding:0" bgcolor="white">' +
makeProfileImage() +
'<h2 style="color:black;">Star Rating</h2><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star checked"/><span class="fa fa-star"/><span class="fa fa-star"/></body></html>');
);
pubspec.yaml
dev_dependencies:
flutter_test:
sdk: flutter
pdf: ^1.3.17
printing: ^2.0.0
flutter_full_pdf_viewer: ^1.0.4
【问题讨论】：
将你的资产文件夹放在你的 Flutter 项目中。这不会有帮助吗？ 是的，我在资产文件夹下有图像，并且已经在 pubspec.yaml 中定义了 我不认为这是一个颤振问题。因为如果我理解这一点，它是关于从网络视图访问资产的。 只有 ios 存在问题，因为我们可以在 android 中访问资产图像。但在 iOS 中，我不知道如何访问资产图像路径以通过 HTML、CSS 呈现图像。 您可以从这里查看答案***.com/questions/56787422/… 【参考方案1】：目前的实现，webview 插件中的 FLTWebViewController 和 FLTWebViewFactory 类无法访问 registrar，所以我将它们的 initWithMessenger 方法更改为 initWithRegistrar。现在我们有了在 iOS webview 中加载资产文件的答案：
NSString* key = [_registrar lookupKeyForAsset:url];
NSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil];
[_webView loadFileURL:nsUrl allowingReadAccessToURL:[NSURL URLWithString:@"file:///"]];
作为拉取请求：https://github.com/flutter/plugins/pull/1247/files
例子：
<html>
<head>
</head>
<body>
<img src="image_name.jpg">
</body>
</html>
然后在 Flutter 项目的根目录下创建 assets 文件夹：
assets:
- assets/image_name.jpg
- assets/htmlfile.html
创建 Web 视图 下面的 dart 代码创建 WebView 并渲染本地 assets/htmlfile.html 文件。
return WebView(
initialUrl: 'assets/htmlfile.html',
javascriptMode: JavascriptMode.unrestricted,
onWebViewCreated: (WebViewController webViewController)
_controller.complete(webViewController);
,
);
Loading Local Assets in WebView in Flutter
【讨论】：
如何在flutter中使用这段代码？ NSString* key = [_registrar lookupKeyForAsset:url]; NSURL* nsUrl = [[NSBundle mainBundle] URLForResource:key withExtension:nil]; [_webView loadFileURL:nsUrl allowedReadAccessToURL:[NSURL URLWithString:@"file:///"]]; @jazzbpn 它正在等待批准 pull github.com/flutter/plugins/pull/1247/files 你可以在flutter插件编辑4个文件或等待批准 好的，我在等。 我们需要编辑哪四个文件和哪个插件？我在 webview 插件中找不到 FLTWebViewController 和 FLTWebViewFactory 类。那么，这些文件在哪里？ 在路径 packages/webview_flutter/ios/Classes/FlutterWebView.h以上是关于如何使用 HTML 渲染图像，使用 Flutter 创建 iOS-App 的 CSS？的主要内容，如果未能解决你的问题，请参考以下文章
Dart // Flutter - 如何连接图像和音频以渲染静态视频
如何使用flutter dart webview渲染本地HTML文件