Flutter如何实现WebView长按图片保存到相册

在Flutter中，使用WebView加载网页时，如何实现长按图片弹出菜单并保存到手机相册的功能？目前尝试了flutter_inappwebview插件，但长按图片时没有触发保存选项。需要监听图片长按事件还是通过JavaScript交互实现？求具体实现方案或推荐支持该功能的WebView插件。

2 回复

Flutter中可使用webview_flutter插件，结合flutter_image_gallery_saver实现长按图片保存。通过JavaScript监听长按事件，获取图片URL，调用原生方法保存到相册。

更多关于Flutter如何实现WebView长按图片保存到相册的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


在Flutter中实现WebView长按图片保存到相册，可以通过以下步骤完成：

  1. 添加依赖
    在 pubspec.yaml 中添加 webview_flutter 和 image_gallery_saver 依赖：

    dependencies:
  webview_flutter: ^4.4.2
  image_gallery_saver: ^2.1.1

  2. 配置权限

    • Android：在 android/app/src/main/AndroidManifest.xml 中添加：
      <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
    • iOS：在 ios/Runner/Info.plist 中添加：
      <key>NSPhotoLibraryAddUsageDescription</key>
<string>需要保存图片到相册</string>

  3. 实现WebView并监听长按事件
    使用 WebViewController 监听长按事件，通过JavaScript获取图片URL并保存：

    import 'package:webview_flutter/webview_flutter.dart';
import 'package:image_gallery_saver/image_gallery_saver.dart';
import 'package:http/http.dart' as http;

class WebViewPage extends StatefulWidget {
  @override
  _WebViewPageState createState() => _WebViewPageState();
}

class _WebViewPageState extends State<WebViewPage> {
  late WebViewController controller;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: WebView(
        onWebViewCreated: (WebViewController webViewController) {
          controller = webViewController;
        },
        onPageFinished: (String url) {
          // 注入JavaScript监听长按事件
          controller.runJavascript('''
            document.addEventListener('contextmenu', function(e) {
              e.preventDefault();
              var src = e.target.src;
              if (src) {
                FlutterInvoker.saveImage(src);
              }
            });
          ''');
        },
        javascriptMode: JavascriptMode.unrestricted,
        javascriptChannels: <JavascriptChannel>{
          JavascriptChannel(
            name: 'FlutterInvoker',
            onMessageReceived: (JavascriptMessage message) async {
              // 收到图片URL后保存
              String imageUrl = message.message;
              await _saveImage(imageUrl);
            },
          ),
        },
      ),
    );
  }

  Future<void> _saveImage(String url) async {
    try {
      var response = await http.get(Uri.parse(url));
      final result = await ImageGallerySaver.saveImage(
        response.bodyBytes,
        quality: 100,
      );
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('图片保存成功！')),
      );
    } catch (e) {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('保存失败：$e')),
      );
    }
  }
}

注意事项：

  • 需要处理网络权限和存储权限请求（可使用 permission_handler 包）。
  • 实际部署时需适配不同图片格式和错误处理。
  • 在iOS模拟器中保存可能无效，需用真机测试。

此方法通过JavaScript拦截长按事件，将图片URL传递到Flutter端，再用 image_gallery_saver 保存到相册。

回到顶部