Flutter Web：图片加载及跨域问题

BennuCTech

发布于 2022-05-31 09:33:01

3.4K0

发布于 2022-05-31 09:33:01

文章被收录于专栏：BennuCTech

加载网络图片

在flutter web上也可以使用Image这个widget来加载显示图片。但是涉及到网络图片的时候就可能会出现问题，现象是不显示图片，控制台报错：

Failed to load network image. Image URL: https://cdnimagelive.knowbox.cn/image/784111920965119.png Trying to load an image from another domain? Find answers at: https://flutter.dev/docs/development/platform-integration/web-images

看提示应该与跨域有关，根据官网的相关文档，Image这个widget在web上支持有限，这时候建议使用其他方式来加载图片

The web offers several methods for displaying images. Below are some of the common ones: The built-inand HTML elements. The drawImage method on the element. Custom image codec that renders to a WebGL canvas.

我们选择使用img标签来显示，通过ImageElements来实现即可，代码如下：

import 'dart:html';
import 'dart:ui' as ui;
import 'package:flutter/cupertino.dart';

class WebImage extends StatelessWidget{
  String url;
  double width;
  double height;

  WebImage(this.url, this.width, this.height);

  @override
  Widget build(BuildContext context) {
    String _divId = "web_image_" + DateTime.now().toIso8601String();
    // ignore: undefined_prefixed_name
    ui.platformViewRegistry.registerViewFactory(
      _divId,
          (int viewId) => ImageElement(src: url),
    );
    return SizedBox(
      width: width,
      height: height,
      child: HtmlElementView(key: UniqueKey(),
        viewType: _divId,),
    );
  }

}

注意，这种方式图片不能按照自身尺寸显示，所以必须设置宽高才可以。

如果想使用圆形图片，则用ClipOval包装即可，如下：

ClipOval(
  child: WebImage("https://cdnimagelive.knowbox.cn/image/784111920965119.png", 50, 50)
)

HTML renderer

但是上面方式有一个很严重的问题，如果一个页面中图片特别多，比如列表，那么使用这种方式的话在pc上运行会特别卡，甚至卡死。会出现大量如下信息：

Flutter: restoring WebGL context. Flutter: restoring WebGL context. Flutter: restoring WebGL context. ... ════════ Exception caught by scheduler library ═════════════════════════════════════════════════════ The following JSNoSuchMethodError was thrown during a scheduler callback: TypeError: Cannot set property 'name' of null When the exception was thrown, this was the stack: https://unpkg.com/canvaskit-wasm@0.24.0/bin/canvaskit.js 223:448 ga https://unpkg.com/canvaskit-wasm@0.24.0/bin/canvaskit.js 1:1 Surface$_flush https://unpkg.com/canvaskit-wasm@0.24.0/bin/canvaskit.js 12:230 flush lib/_engine/engine/canvaskit/surface.dart 290:14 flush lib/_engine/engine/canvaskit/surface.dart 266:5 [_presentSurface] ... ════════════════════════════════════════════════════════════════════════════════════════════════════

其实在上面的官方文档（https://flutter.dev/docs/development/platform-integration/web-images ）中已经提到了

As of today, using too many HTML elements with the CanvasKit renderer may hurt performance. If images interleave non-image content Flutter needs to create extra WebGL contexts between theelements. If your application needs to display a lot of images on the same screen all at once, consider using the HTML renderer instead of CanvasKit.

如果在一个页面有很多图片，则使用HTML renderer来代替CanvasKit。

那么什么是HTML renderer，什么是CanvasKit，如何使用这两个？

根据https://flutter.cn/docs/development/tools/web-renderers 官方文档，flutter对于web的渲染是有两种模式，即html和Canvaskit。

Canvaskit将 Skia 编译成 WebAssembly 格式，并使用 WebGL 渲染。应用在移动和桌面端保持一致，有更好的性能，以及降低不同浏览器渲染效果不一致的风险。但是应用的大小会增加大约 2MB。

默认情况下flutter自动选择渲染器。移动端浏览器选择 HTML，桌面端浏览器选择 CanvasKit。

但是我们如果想使用HTML renderer，就必须强制设置一下，而这个设置并不是在代码中，而是在启动参数中，如下