유니앱에서 화면 일부를 캡쳐하는 방법

모바일 인터넷이 발전함에 따라 사용자 경험을 개선하기 위해 스크린샷 기능을 구현해야 하는 애플리케이션이 점점 더 많아지고 있습니다. 개발 과정에서 uniapp은 화면 캡처를 포함하여 다양한 기능을 구현하는 데 사용할 수 있는 풍부한 기능과 인터페이스를 제공하는 매우 인기 있는 크로스 플랫폼 개발 프레임워크입니다. 이번 글에서는 uniapp이 화면 캡쳐 기능을 구현하는 방법을 소개하겠습니다.

1. 유니앱 화면 캡쳐의 기본 원리

유니앱에서 화면 캡쳐의 원리는 기본적으로 위챗 애플릿에서 제공하는 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.canvasToTempFilePath 인터페이스를 호출하여 차단할 부분을 임시 파일 형태로 보존하여 저장합니다. 인터페이스의 성공 콜백 기능에서 uni.showActionSheet를 사용하여 작업 메뉴를 표시할 수 있습니다. 사용자는 사진을 미리 보거나 사진을 로컬 앨범에 저장할 수 있습니다.

주의할 점은 화면 캡처 기능을 구현하려면 현재 페이지에 캔버스 요소를 정의하여 캡처할 내용을 그려야 한다는 것입니다. 다양한 화면 크기와 위치에 맞게 캔버스 요소의 너비, 높이 및 위치를 동적으로 계산해야 합니다.

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. 유니앱은 운영체제의 네이티브 구성요소를 직접 동작시킬 수 없기 때문에, uni.createSelectorQuery()를 호출해야 합니다. in(this)이 노드 정보를 얻을 때 DOM이 렌더링되었는지 확인하기 위해 지연을 설정해야 합니다.
2. uni.canvasToTempFilePath 인터페이스를 호출할 때 가로챌 캔버스 요소의 ID를 지정하려면 canvasId 매개변수를 지정해야 합니다.
3. 이미지를 미리 보거나 로컬 앨범에 이미지를 저장할 때 uni.canvasToTempFilePath 인터페이스에서 생성된 임시 파일 경로인 이미지 경로를 지정해야 합니다. 동시에 로컬 앨범에 사진을 저장할 때 매니페스트.json에서 writePhotosAlbum 권한을 설정해야 합니다.

IV.결론

본 글의 서문을 통해 유니앱의 화면 캡처 구현을 위한 기본 원리와 단계를 확인하고, 주의할 점에 대해 알아볼 수 있다. 유니앱이 제공하는 인터페이스와 기능을 합리적으로 적용함으로써, 다양한 애플리케이션의 기능적 요구사항을 신속하게 실현할 수 있고, 사용자 경험을 향상시킬 수 있으며, 사용자에게 좋은 사용자 경험을 선사할 수 있습니다.

위 내용은 유니앱에서 화면 일부를 캡쳐하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!