Comment capturer une partie de l'écran dans Uniapp

Avec le développement de l'Internet mobile, de plus en plus d'applications doivent implémenter des fonctions de capture d'écran pour améliorer l'expérience utilisateur. Au cours du processus de développement, uniapp est un framework de développement multiplateforme très populaire. Il fournit une multitude de fonctions et d'interfaces qui peuvent être utilisées pour implémenter diverses fonctions, notamment la capture d'écran. Cet article présentera comment uniapp implémente la fonction de capture d'écran.

1. Le principe de base de la capture d'écran uniapp

Dans uniapp, le principe de la capture d'écran consiste essentiellement à utiliser l'interface wx.canvasToTempFilePath fournie par l'applet WeChat pour capturer une partie ou la totalité de l'écran afin de générer un chemin de fichier temporaire. Ensuite, affichez le menu de fonctionnement ou l'image d'aperçu via l'interface showActionSheet ou showModal fournie avec uniapp. Voici le code d'un exemple simple de capture d'écran :

export default {
  data() {
    return {
      canvasWidth: 0,
      canvasHeight: 0,
      canvasTop: 0,
      canvasLeft: 0
    }
  },
  methods: {
    getCanvas() {
      const query = uni.createSelectorQuery().in(this)
      query.select('#canvas-container').boundingClientRect(data => {
        uni.canvasToTempFilePath({
          x: data.left,
          y: data.top,
          width: data.width,
          height: data.height,
          destWidth: data.width * 2,
          destHeight: data.height * 2,
          canvasId: 'canvas',
          success: res => {
            uni.showActionSheet({
              itemList: ['预览图片', '保存图片'],
              success: res => {
                if (res.tapIndex == 0) {
                  uni.previewImage({
                    urls: [res.tempFilePath]
                  })
                } else if (res.tapIndex == 1) {
                  uni.saveImageToPhotosAlbum({
                    filePath: res.tempFilePath,
                    success: () => {
                      uni.showToast({
                        title: '保存成功！'
                      })
                    },
                    fail: () => {
                      uni.showToast({
                        title: '保存失败！'
                      })
                    }
                  })
                }
              }
            })
          },
          fail: res => {
            uni.showToast({
              title: '生成临时文件路径失败！'
            })
          }
        }, this)
      }).exec()
    }
  }
}

Parmi eux, obtenez d'abord la largeur et la hauteur du nœud de la page actuelle via uni.createSelectorQuery().in(this), puis appelez l'interface uni.canvasToTempFilePath pour enregistrez la pièce à intercepter car un formulaire de fichier temporaire est conservé. Dans la fonction de rappel de réussite de l'interface, utilisez uni.showActionSheet pour afficher le menu d'opération. L'utilisateur peut choisir de prévisualiser l'image ou de l'enregistrer dans l'album local.

Il est à noter que pour implémenter la fonction de capture d'écran, vous devez définir un élément de canevas dans la page actuelle pour dessiner le contenu à capturer. La largeur, la hauteur et la position de l'élément de canevas doivent être calculées dynamiquement pour s'adapter aux différentes tailles et positions d'écran.

2. Étapes de mise en œuvre de la capture d'écran uniapp

Ce qui suit présentera les étapes d'uniapp pour implémenter la capture d'écran :

1. Créez un élément de canevas pour dessiner le contenu à intercepter. Définissez la position et la taille de l'élément canevas en fonction de la position et de la taille que vous devez intercepter. Par exemple :

<canvas id="canvas" style="position: absolute; top: {{canvasTop}}px; left: {{canvasLeft}}px; width: {{canvasWidth}}px; height: {{canvasHeight}}px;"></canvas>

2. Avant d'obtenir les informations du nœud de la page actuelle, vous devez définir un délai dans la fonction de cycle de vie onReady dans la page pour vous assurer que le dom a été rendu.

onReady() {
  setTimeout(() => {
    this.getCanvas()
  }, 500)
},

3. Utilisez uni.createSelectorQuery().in(this) pour obtenir les informations du nœud de la page actuelle, puis appelez l'interface uni.canvasToTempFilePath pour enregistrer la partie interceptée sous la forme d'un fichier temporaire.

const query = uni.createSelectorQuery().in(this)
query.select('#canvas-container').boundingClientRect(data => {
  uni.canvasToTempFilePath({
    x: data.left,
    y: data.top,
    width: data.width,
    height: data.height,
    destWidth: data.width * 2,
    destHeight: data.height * 2,
    canvasId: 'canvas',
    success: res => {
      // ...
    },
    fail: res => {
      uni.showToast({
        title: '生成临时文件路径失败！'
      })
    }
  }, this)
}).exec()

4. Dans la fonction de rappel de réussite de l'interface uni.canvasToTempFilePath, utilisez uni.showActionSheet pour afficher le menu d'opération. L'utilisateur peut choisir de prévisualiser l'image ou d'enregistrer l'image dans l'album local. Par exemple :

uni.showActionSheet({
  itemList: ['预览图片', '保存图片'],
  success: res => {
    if (res.tapIndex == 0) {
      uni.previewImage({
        urls: [res.tempFilePath]
      })
    } else if (res.tapIndex == 1) {
      uni.saveImageToPhotosAlbum({
        filePath: res.tempFilePath,
        success: () => {
          uni.showToast({
            title: '保存成功！'
          })
        },
        fail: () => {
          uni.showToast({
            title: '保存失败！'
          })
        }
      })
    }
  }
})

3. Précautions pour la capture d'écran uniapp

Dans le processus de mise en œuvre de la capture d'écran, vous devez faire attention aux points suivants :

1. Étant donné qu'uniapp ne peut pas exploiter directement les composants natifs du système d'exploitation, il est nécessaire d'appeler uni.createSelectorQuery() Lorsque in(this) obtient des informations sur le nœud, un délai doit être défini pour garantir que le dom a été rendu.
2. Lors de l'appel de l'interface uni.canvasToTempFilePath, vous devez spécifier le paramètre canvasId pour spécifier l'identifiant de l'élément canvas à intercepter.
3. Lors de la prévisualisation d'une image ou de l'enregistrement d'une image dans un album local, vous devez spécifier le chemin de l'image, qui est le chemin du fichier temporaire généré par l'interface uni.canvasToTempFilePath. Dans le même temps, lors de l'enregistrement de photos dans l'album local, vous devez définir l'autorisation writePhotosAlbum dans manifest.json.

IV. Conclusion

Grâce à l'introduction de cet article, nous pouvons voir les principes de base et les étapes d'uniapp pour mettre en œuvre la capture d'écran et apprendre à quoi il faut prêter attention. En appliquant rationnellement les interfaces et les fonctions fournies par uniapp, les exigences fonctionnelles de diverses applications peuvent être rapidement réalisées, l'expérience utilisateur peut être améliorée et une bonne expérience utilisateur peut être apportée aux utilisateurs.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!