uniappで画面の一部をキャプチャする方法

モバイル インターネットの発展に伴い、ユーザー エクスペリエンスを向上させるためにスクリーンショット機能を実装する必要があるアプリケーションがますます増えています。開発プロセスにおいて、uniapp は非常に人気のあるクロスプラットフォーム開発フレームワークであり、画面キャプチャを含むさまざまな機能を実装するために使用できる豊富な機能とインターフェイスを提供します。この記事では、uniapp が画面キャプチャ機能を実装する方法を紹介します。

1. uniapp における画面キャプチャの基本原則

uniapp における画面キャプチャの原則は、基本的に WeChat アプレットによって提供されるインターフェイス wx.canvasToTempFilePath を使用して、画面の一部またはすべてをキャプチャすることです。次に一時ファイルのパスを生成します。次に、uniapp に付属する showActionSheet または showModal インターフェースを介して、操作メニューまたはプレビュー画像を表示します。以下は、簡単な画面キャプチャの例のコードです。

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

その中で、まず uni.createSelectorQuery().in(this) を通じて現在のページ ノードの幅と高さを取得し、次に uni.createSelectorQuery().in(this) を呼び出します。 .canvasToTempFilePath インターフェイスをインターセプトするため、一部は一時ファイルとして保存されます。インターフェイスの成功コールバック関数では、uni.showActionSheet を使用して操作メニューを表示し、画像をプレビューするかローカル アルバムに保存するかを選択できます。

画面キャプチャ機能を実装するには、キャプチャするコンテンツを描画するために現在のページに Canvas 要素を定義する必要があることに注意してください。キャンバス要素の幅、高さ、位置は、さまざまな画面サイズと位置に適応するために動的に計算される必要があります。

2. uniapp の画面キャプチャの実装手順

以下に、uniapp の画面キャプチャを実装する手順を紹介します:

1. 描画するキャンバス要素を作成します。傍受されたコンテンツ。インターセプトする必要がある位置とサイズに応じて、キャンバス要素の位置とサイズを設定します。例:

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

2. 現在のページ ノードの情報を取得する前に、ページの onReady ライフ サイクル関数に遅延を設定して、dom がレンダリングされていることを確認する必要があります。

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

3. uni.createSelectorQuery().in(this) を使用して現在のページ ノードの情報を取得し、uni.canvasToTempFilePath インターフェイスを呼び出してインターセプトされた部分をフォームに保存します一時ファイルの。

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. uni.canvasToTempFilePath インターフェースの成功コールバック関数で、uni.showActionSheet を使用して操作メニューを表示します。ユーザーは画像をプレビューするか、画像をローカルに保存するかを選択できます。アルバム。例:

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. ユニアプリの画面キャプチャに関する注意事項

画面キャプチャを実装する際には、次の点に注意する必要があります:

1. uniapp のため ネイティブコンポーネントを直接操作することはできないため、uni.createSelectorQuery().in(this) を呼び出してノード情報を取得する際には、DOM がレンダリングされたことを確認するために遅延を設定する必要があります。
2. uni.canvasToTempFilePath インターフェースを呼び出すときは、canvasId パラメーターを指定して、インターセプトする Canvas 要素の ID を指定する必要があります。
3. 画像をプレビューするとき、または画像をローカル アルバムに保存するときは、画像パスを指定する必要があります。これは、uni.canvasToTempFilePath インターフェイスによって生成される一時ファイル パスです。同時に、写真をローカル アルバムに保存するときは、manifest.json で writePhotosAlbum 権限を設定する必要があります。

4. 結論

この記事の導入部を通じて、uniapp の基本原則と画面キャプチャを実装する手順を確認し、何に注意する必要があるかを学ぶことができます。 uniappが提供するインターフェースと機能を合理的に適用することで、さまざまなアプリケーションの機能要件を迅速に実現し、ユーザーエクスペリエンスを向上させ、ユーザーに優れたユーザーエクスペリエンスをもたらすことができます。

以上がuniappで画面の一部をキャプチャする方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。