当前位置：首页 > uni-app

uniapp标签截图

2026-02-06 05:42:48uni-app

获取当前页面截图

在uniapp中，可以使用uni.canvasToTempFilePath或uni.getSystemInfo结合uni.canvasToTempFilePath实现页面截图。以下是一个示例代码：

// 获取当前页面节点
const query = uni.createSelectorQuery().in(this);
query.select('#your-element-id').boundingClientRect(res => {
  uni.canvasToTempFilePath({
    x: res.left,
    y: res.top,
    width: res.width,
    height: res.height,
    destWidth: res.width * 2,
    destHeight: res.height * 2,
    canvasId: 'your-canvas-id',
    success: (tempFilePath) => {
      console.log('截图成功', tempFilePath);
      uni.saveImageToPhotosAlbum({
        filePath: tempFilePath.tempFilePath,
        success: () => {
          uni.showToast({ title: '保存成功' });
        }
      });
    }
  });
}).exec();

使用`html2canvas`库

如果需要更复杂的截图功能，可以通过renderjs引入html2canvas库：

// 在renderjs中调用html2canvas
methods: {
  capture() {
    const html2canvas = require('html2canvas');
    html2canvas(document.body).then(canvas => {
      const imgData = canvas.toDataURL('image/png');
      uni.saveImageToPhotosAlbum({
        filePath: imgData,
        success: () => {
          uni.showToast({ title: '保存成功' });
        }
      });
    });
  }
}

原生APP端截图

在原生APP端，可以使用plus.screen模块：

// 获取屏幕截图
plus.screen.capture(function(path) {
  uni.saveImageToPhotosAlbum({
    filePath: path,
    success: () => {
      uni.showToast({ title: '保存成功' });
    }
  });
}, function(error) {
  console.error('截图失败:', error);
});