How to capture part of the screen in uniapp

With the development of mobile Internet, more and more applications need to implement screenshot functions to improve user experience. During the development process, uniapp is a very popular cross-platform development framework. It provides a wealth of functions and interfaces that can be used to implement various functions, including screen capture. This article will introduce how uniapp implements the screen capture function.

1. The basic principle of screen capture in uniapp

In uniapp, the principle of screen capture is basically to use the interface wx.canvasToTempFilePath provided by the WeChat applet to capture part or all of the screen Next generate the temporary file path. Then, display the operation menu or preview image through the interface showActionSheet or showModal that comes with uniapp. The following is the code for a simple screen capture example:

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

Among them, first obtain the width and height of the current page node through uni.createSelectorQuery().in(this), and then call the uni.canvasToTempFilePath interface to intercept the Some are saved as temporary files. In the success callback function of the interface, use uni.showActionSheet to display the operation menu. The user can choose to preview the picture or save the picture to the local album.

It should be noted that to implement the screen capture function, you need to define a canvas element in the current page to draw the content to be captured. The width, height and position of the canvas element need to be dynamically calculated to adapt to different screen sizes and positions.

2. Implementation steps of uniapp screen capture

The following will introduce the steps of uniapp to implement screen capture:

1. Create a canvas element for drawing to be intercepted Content. Set the position and size of the canvas element according to the position and size you need to intercept. For example:

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

2. Before obtaining the information of the current page node, you need to set a delay in the onReady life cycle function in the page to ensure that the dom has been rendered.

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

3. Use uni.createSelectorQuery().in(this) to obtain the information of the current page node, and then call the uni.canvasToTempFilePath interface to save the intercepted part in the form of a temporary file.

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. In the success callback function of the uni.canvasToTempFilePath interface, use uni.showActionSheet to display the operation menu. The user can choose to preview the image or save the image to the local album. For example:

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. Precautions for uniapp screen capture

In the process of implementing screen capture, you need to pay attention to the following matters:

1. Because of uniapp You cannot directly operate native components, so when calling uni.createSelectorQuery().in(this) to obtain node information, you need to set a delay to ensure that the DOM has been rendered.
2. When calling the uni.canvasToTempFilePath interface, you need to specify the canvasId parameter to specify the id of the canvas element to be intercepted.
3. When previewing images or saving images to a local album, you need to specify the image path, which is the temporary file path generated by the uni.canvasToTempFilePath interface. At the same time, when saving pictures to the local album, you need to set the writePhotosAlbum permission in manifest.json.

4. Conclusion

Through the introduction of this article, we can see the basic principles and steps of uniapp to implement screen capture, and learn what needs to be paid attention to. By rationally applying the interfaces and functions provided by uniapp, the functional requirements of various applications can be quickly realized, the user experience can be improved, and a good user experience can be brought to users.

The above is the detailed content of How to capture part of the screen in uniapp. For more information, please follow other related articles on the PHP Chinese website!