So erfassen Sie einen Teil des Bildschirms in Uniapp

Mit der Entwicklung des mobilen Internets müssen immer mehr Anwendungen Screenshot-Funktionen implementieren, um das Benutzererlebnis zu verbessern. Während des Entwicklungsprozesses ist Uniapp ein sehr beliebtes plattformübergreifendes Entwicklungsframework. Es bietet eine Fülle von Funktionen und Schnittstellen, mit denen verschiedene Funktionen implementiert werden können, einschließlich der Bildschirmaufnahme. In diesem Artikel wird vorgestellt, wie Uniapp die Bildschirmaufnahmefunktion implementiert.

1. Das Grundprinzip der Uniapp-Bildschirmaufnahme

In Uniapp besteht das Prinzip der Bildschirmaufnahme im Wesentlichen darin, die vom WeChat-Applet bereitgestellte Schnittstelle wx.canvasToTempFilePath zu verwenden, um die zu ändern screen Fangen Sie einen Teil oder alles davon ab, um einen temporären Dateipfad zu generieren. Zeigen Sie dann das Betriebsmenü oder das Vorschaubild über die mit uniapp gelieferte Schnittstelle showActionSheet oder showModal an. Das Folgende ist der Code für ein einfaches Beispiel für eine Bildschirmaufnahme:

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()
    }
  }
}

Ermitteln Sie unter anderem zunächst die Breite und Höhe des aktuellen Seitenknotens über uni.createSelectorQuery().in(this) und rufen Sie dann auf Die uni.canvasToTempFilePath-Schnittstelle zu Der abgefangene Teil wird in Form einer temporären Datei gespeichert. Verwenden Sie in der Erfolgsrückruffunktion der Schnittstelle uni.showActionSheet, um das Betriebsmenü anzuzeigen. Der Benutzer kann wählen, ob er eine Vorschau des Bildes anzeigen oder das Bild im lokalen Album speichern möchte.

Es ist zu beachten, dass Sie zum Implementieren der Bildschirmaufnahmefunktion ein Canvas-Element auf der aktuellen Seite definieren müssen, um den aufzunehmenden Inhalt zu zeichnen. Die Breite, Höhe und Position des Canvas-Elements müssen dynamisch berechnet werden, um sich an unterschiedliche Bildschirmgrößen und -positionen anzupassen.

2. Implementierungsschritte der Uniapp-Bildschirmaufnahme

Im Folgenden werden die Schritte von Uniapp zur Implementierung der Bildschirmaufnahme vorgestellt:

1. Erstellen ein Canvas-Element, das zum Zeichnen des abzufangenden Inhalts verwendet wird. Legen Sie die Position und Größe des Canvas-Elements entsprechend der Position und Größe fest, die Sie abfangen möchten. Beispiel:

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

2. Bevor Sie die Informationen des aktuellen Seitenknotens erhalten, müssen Sie eine Verzögerung in der onReady-Lebenszyklusfunktion auf der Seite festlegen, um sicherzustellen, dass der Dom wurde gerendert.

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

3. Verwenden Sie uni.createSelectorQuery().in(this), um die Informationen des aktuellen Seitenknotens abzurufen, und rufen Sie dann die Schnittstelle uni.canvasToTempFilePath auf, um das Abgefangene zu konvertieren Teil in eine temporäre Datei speichern.

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. Verwenden Sie in der Erfolgsrückruffunktion der uni.canvasToTempFilePath-Schnittstelle uni.showActionSheet, um das Betriebsmenü anzuzeigen. Der Benutzer kann wählen, ob er eine Vorschau des Bildes anzeigen oder es speichern möchte Bild in das lokale Album kopieren. Zum Beispiel:

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. Vorsichtsmaßnahmen für die Uniapp-Bildschirmaufnahme

Bei der Implementierung der Bildschirmaufnahme müssen Sie auf folgende Dinge achten: # 🎜🎜##🎜 🎜#

Da uniapp native Komponenten nicht direkt bedienen kann, muss beim Aufruf von uni.createSelectorQuery().in(this) zum Abrufen von Knoteninformationen eine Verzögerung festgelegt werden, um sicherzustellen, dass der Dom gerendert wurde .

1. Wenn Sie die Schnittstelle uni.canvasToTempFilePath aufrufen, müssen Sie den Parameter „canvasId“ angeben, um die ID des abzufangenden Canvas-Elements anzugeben.
2. Bei der Vorschau eines Bildes oder beim Speichern eines Bildes in einem lokalen Album müssen Sie den Bildpfad angeben, bei dem es sich um den temporären Dateipfad handelt, der von der Schnittstelle uni.canvasToTempFilePath generiert wird. Gleichzeitig müssen Sie beim Speichern von Bildern im lokalen Album die Berechtigung writePhotosAlbum in manifest.json festlegen.
3. 4. Fazit

Durch die Einführung dieses Artikels können wir die Grundprinzipien und Schritte von uniapp zur Implementierung der Bildschirmaufnahme sehen und erfahren, was dazu erforderlich ist darauf geachtet werden. Durch die rationelle Anwendung der von uniapp bereitgestellten Schnittstellen und Funktionen können die Funktionsanforderungen verschiedener Anwendungen schnell realisiert, die Benutzererfahrung verbessert und den Benutzern eine gute Benutzererfahrung geboten werden.

Das obige ist der detaillierte Inhalt vonSo erfassen Sie einen Teil des Bildschirms in Uniapp. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!