[Flutter Problem Series Part 8] Comment capturer l'écran dans Flutter et l'afficher sur la page, et comment enregistrer la capture d'écran dans l'album photo

Il y a très peu d'articles sur la façon de capturer l'écran dans Flutter et comment enregistrer la capture d'écran dans l'album photo, même s'il y en a, il y a beaucoup d'erreurs.

J'ai donc trié ce blog et réalisé deux fonctions

• Comment capturer tout l'écran ou une partie de l'écran et l'afficher sur la page
• Comment enregistrer l'image capturée sur la pellicule

Ces deux fonctions ont été personnellement testées et il n'y a aucun problème. Le code source sera fourni. S'il est utile, j'espère que vous pourrez me donner un lien à trois. Vient ensuite le texte du blog.

Un : Comment capturer l'écran et l'afficher sur la page

Conformément à la pratique internationale, téléchargez d'abord les rendus (si vous n'avez pas vu les rendus en premier, je suppose que vous irez tous ~)

On peut voir à partir du diagramme d'effet que chaque image capturée est une image différente, la fonction est réalisée et l'étape suivante est le code de réalisation de la fonction.

1 : Présentation du composant RepeindreBoundary

Nous savons que tout est un composant dans Flutter, donc la capture d'écran dont nous parlerons ensuite est en fait un composant, pas tant une interception de l'écran qu'une interception d'un composant.

Et le nom de ce composant est RepaintBoundary, le code source est le suivant

 RepaintBoundary({ Key key, Widget child }) 

Il est également très simple à utiliser, il suffit de le définir sur le composant que vous souhaitez capturer, si vous souhaitez capturer la page entière, il suffit de le définir en dehors de l'échafaudage.

Comme RepaintBoundaryhérite de SingleChildRenderObjectWidgetet que nous devons obtenir l'état du composant intercepté, le type du premier paramètre Key doit être GlobalKey, comme indiqué ci-dessous

GlobalKey _repaintKey = GlobalKey(); // 可以获取到被截图组件状态的 GlobalKey 

Et le deuxième paramètre est le composant que vous devez intercepter, comme indiqué dans le code suivant

RepaintBoundary(
  key: _repaintKey,
  child: Image.asset("assets/girl.gif", width: 200, height: 200, fit: BoxFit.cover),
) 

2 : Comment faire une capture d'écran

La prochaine chose dont il faut parler est la partie centrale, qui consiste à savoir comment obtenir les données de l'image interceptée.

Ici, j'ai copié le code directement ci-dessous, et les codes clés sont expliqués, je pense que tout le monde peut le comprendre en un coup d'œil.

 /// 获取截取图片的数据
  Future<Uint8List> _getImageData() async {
    BuildContext buildContext = _repaintKey.currentContext;
    if (buildContext != null) {
      RenderRepaintBoundary boundary = buildContext.findRenderObject();
      // 第一次执行时，boundary.debugNeedsPaint 为 true，此时无法截图（如果为true时直接截图会报错）
      if (boundary.debugNeedsPaint) {
        // 延时一定时间后，boundary.debugNeedsPaint 会变为 false，然后可以正常执行截图的功能
        await Future.delayed(Duration(milliseconds: 20));
        // 重新调用方法
        return _getImageData();
      }
      // 获取当前设备的像素比
      double dpr = ui.window.devicePixelRatio;
      // pixelRatio 代表截屏之后的模糊程度，因为不同设备的像素比不同
      // 定义一个固定数值显然不是最佳方案，所以以当前设备的像素为目标值
      ui.Image image = await boundary.toImage(pixelRatio: dpr);
      ByteData byteData = await image.toByteData(format: ui.ImageByteFormat.png);
      Uint8List imageBytes = byteData.buffer.asUint8List();
      // 返回图片的数据
      return imageBytes;
    }
  } 

Ici, les données d'image sont renvoyées au format Uint8List, ce qui est pratique pour afficher l'image ultérieurement.

3 : Comment afficher les captures d'écran sur la page

Nous pouvons Image.memory();charger des images de la mémoire via la méthode, et cette méthode doit transmettre les données de l'image, et le type de données est Uint8List, c'est pourquoi les données d'image sont renvoyées dans le type de Uint8List.

S'il y a plusieurs captures d'écran à afficher, définissez une liste

List<Uint8List> _images = []; // 存放所有截图的列表 

Ensuite, lorsque le bouton du bas est cliqué, exécutez la fonction suivante

/// 执行截图并显示到页面中
void _doScreenShots() async {
  Uint8List data = await _getImageData();
  _images.add(data);
  setState(() {});
} 

La dernière chose est de parcourir la liste et d'afficher l'image, comme indiqué dans le code suivant

GridView.builder(
  gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
    crossAxisCount: 3,
  ),
  itemCount: _images.length,
  itemBuilder: (BuildContext context, int index) {
    if (_images.isEmpty) {
      return Container();
    }
    return Image.memory(_images[index], fit: BoxFit.cover);
  },
) 

À ce stade, l'introduction de la façon de capturer l'écran et de l'afficher sur la page est terminée. Il convient de noter que lorsque la _getImageData()méthode boundary.debugNeedsPaintest vraie, ne prenez pas de capture d'écran, ne prenez pas de capture d'écran, ne prenez pas de capture d'écran, sinon il signalera

'!debugNeedsPaint' : n'est pas une vraie erreur, rappelez-vous ! ! !

Deux : Comment enregistrer les images capturées dans l'album photo

Comment faire une capture d'écran a déjà été dit, comment enregistrer la capture d'écran dans l'album photo ?

1 : Configurer les autorisations, référencer les plug-ins

Si vous enregistrez dans l'album photo, cela impliquera l'autorisation de stocker le fichier et comment enregistrer l'image dans l'album photo.

Voici deux plugins référencés

• Plug-in de contrôle des autorisations permission_handler
• Stockage d'images dans le plugin d'album image_gallery_saver

Importez ensuite pubspec.yamlces deux plugins dans le fichier comme suit

dependencies:
  permission_handler: ^8.1.1 # 权限控制插件 by Allen Su
  image_gallery_saver: ^1.6.9 # 图片存储到相册插件 by Allen Su 

Système Android, vous devez android/app/src/main/AndroidManifest.xmlajouter le code suivant dans le fichier

<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> <!--写入外部存储权限-->
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/> <!--读取外部存储权限--> 

Système Apple, vous devez ios/Runner/Info.plistajouter le code suivant dans le fichier

<key>NSPhotoLibraryAddUsageDescription</key>
<string>请允许APP保存图片到相册</string> 

(Parce que le blogueur est engagé dans le développement d'Android, voici les informations que j'ai lues sur ios, et cela n'a pas été confirmé, il ne devrait donc pas y avoir de problème)

2 : Enregistrer les images dans l'album

Le problème d'autorisation est résolu. L'étape suivante consiste à stocker la capture d'écran dans l'album local. C'est très simple. En fait, une ligne de code suffit. Le code suivant comprend l'obtention de l'autorisation de stockage et le stockage de l'image dans l'album , comme indiqué ci-dessous

/// 执行存储图片到本地相册
void _doSaveImage() async {
  // 如果用户已授权存储权限
  if (await Permission.storage.request().isGranted) {
    Uint8List data = await _getImageData();
    await ImageGallerySaver.saveImage(data);
  } else {
    // 没有存储权限时，弹出没有存储权限的弹窗
  }
} 

Lorsque le bouton est cliqué, l'autorisation est obtenue, comme indiqué dans la figure ci-dessous

Après avoir cliqué sur Autoriser, l'image sera automatiquement enregistrée dans l'album, comme indiqué ci-dessous

Comme vous pouvez le voir, c'est la vue qui a été enregistrée dans l'album photo. Jusqu'à présent, l'introduction de la façon de capturer l'écran dans Flutter et de l'afficher sur la page, et comment enregistrer la capture d'écran dans l'album photo est terminée Suivez les étapes que j'ai écrites, il ne devrait y avoir aucun problème.

Votre problème est-il résolu ? Bienvenue à laisser un message dans la zone de commentaire.

Donner des roses aux autres a un parfum persistant dans ma main. Si vous pensez que l'article est bon, j'espère que vous pourrez me donner un triple lien en un clic, merci.

---

Fin de l'article

Si vous voulez devenir architecte, ne vous limitez pas au codage et aux affaires, vous devez être capable de sélectionner des modèles, d'élargir et d'améliorer la réflexion sur la programmation. De plus, un bon plan de carrière est également très important, et l'habitude d'apprendre est très importante, mais le plus important est de pouvoir persévérer.Tout plan qui ne peut pas être mis en œuvre de manière cohérente est un vain mot.

Si vous n'avez pas de direction, je voudrais ici partager avec vous un ensemble de "Notes avancées sur les huit modules majeurs d'Android" rédigées par l'architecte principal d'Ali, pour vous aider à organiser systématiquement les connaissances désordonnées, dispersées et fragmentées, afin que vous puissiez maîtriser systématiquement et efficacement les différents points de connaissance du développement Android.

Par rapport au contenu fragmenté que nous lisons habituellement, les points de connaissance de cette note sont plus systématiques, plus faciles à comprendre et à mémoriser, et sont organisés strictement selon le système de connaissances.

1. Compétences essentielles pour les architectes

1. Compréhension approfondie des génériques Java
2. Annotations en termes simples
3. Programmation concurrente
4. Transmission et sérialisation des données
5. Principes de la machine virtuelle Java
6. Efficient IO
...

2. Analyse du code source des 100 meilleurs frameworks Android

1.Retrofit 2.0 analyse du code
source2.Okhttp3 analyse du code
source3.ButterKnife analyse du code source4.MPAndroidChart analyse
du code source5.Glide analyse du
code source6.Leakcanary
analyse du code
source7.Universal-lmage-Loader analyse du code
source8.EventBus 3.0 analyse du code
source9.zxing source Analyse du code
10. Analyse du code source de Picasso
11. LottieAndroid utilise une explication détaillée et une analyse du code source
12. Analyse du code source de Fresco - processus de chargement de l'image

3. Analyse réelle de l'optimisation des performances d'Android

• Tencent Bugly : un peu de compréhension des algorithmes de correspondance de chaînes
• iQiyi : solution de capture de crash d'applications Android - xCrash
• ByteDance : Compréhension approfondie de l'un des frameworks Gradle : Plugin, Extension, buildSrc
• Technologie Baidu APP : pratique d'optimisation du premier écran Android H5
• Analyse de l'architecture du client Alipay : optimisation de la vitesse de démarrage du client Android "garbage collection"
• Ctrip : Du projet Zhixing Android pour voir la pratique de l'architecture des composants
• Netease News Construction Optimization : Comment rendre votre construction rapide "comme l'éclair" ?
• …

4. Kotlin avancé renforce le combat réel

1. Tutoriel d'introduction à Kotlin
2. Guide d'évitement réel des fosses Kotlin
3. Projet de combat réel "Kotlin Jetpack combat réel"

• Commencez avec une démo qui vénère le Grand Dieu

• Quelle est l'expérience d'écriture de scripts Gradle dans Kotlin ?

• Le triple royaume de la programmation Kotlin

• Fonctions d'ordre supérieur de Kotlin

• Génériques Kotlin

• Extensions Kotlin

• Délégation Kotlin

• Techniques de débogage "inconnues" pour les coroutines

• Coroutine graphique : suspendre

5. Déchiffrement avancé du cadre open source de l'interface utilisateur avancée d'Android

1. Utilisation de SmartRefreshLayout
2. Analyse du code source du contrôle Android PullToRefresh
3. Utilisation de base de la bibliothèque d'actualisation déroulante Android-PullToRefresh
4. LoadSir - cadre de gestion de la page de retour de chargement efficace et facile à utiliser
5. Cadre de chargement général Android LoadingView détaillé explication
6. MPAndroidChart implémente LineChart (graphique linéaire)
7. Guide d'utilisation de Hellocharts-android
8. Guide d'utilisation de SmartTable
9. Introduction au projet open source android-uitableview
10. Guide d'utilisation d'ExcelPanel
11. Analyse approfondie du projet open source Android
SlidingMenu 12. MaterialDrawer mode d'emploi

6. Développement de modules NDK

1. Développement du module NDK
2. Module JNI
3. Outils de développement natifs 4.
Programmation Linux
5. Traitement d'image bas niveau
6. Développement audio et vidéo
7. Machine learning

7. Technologie Flutter avancée

1. Présentation du développement multiplateforme Flutter
2. Construire l'environnement de développement Flutter sous Windows
3. Écrire votre première application Flutter
4. Construire et déboguer l'environnement de développement Flutter
5. Grammaire de base de la grammaire Dart (1)
6. Partie de la grammaire Dart L'utilisation des collections et l'analyse du code source (2)
7. Fonctions d'opérateur de collection et analyse du code source de la syntaxe Dart (3)
...

8. Développement du mini-programme Wechat

1. Présentation et introduction du petit programme
2. Développement de l'interface utilisateur du petit programme
3. Fonctionnement de l'API
4. Combat du projet de centre commercial ...

Ensemble complet de matériel vidéo :

1. Collecte d'interviews

2. Collecte d'analyses de code source

3. Collection de frameworks open source

Bienvenue à tous au support en un clic et trois liens. Si vous avez besoin des informations contenues dans l'article, cliquez simplement sur la carte WeChat de certification officielle CSDN à la fin de l'article pour l'obtenir gratuitement [garantie 100% gratuite]↓↓↓