uniapp标签截图

获取当前页面截图

在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);
});

注意事项

• H5端可能受跨域限制，需确保资源同源或配置CORS。
• 小程序端需在canvas组件上设置canvas-id，并提前渲染内容。
• APP端权限需在manifest.json中声明存储权限。