# WebpageSnapShot

**Repository Path**: zhanghao2519/WebpageSnapShot

## Basic Information

- **Project Name**: WebpageSnapShot
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Apache-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 6
- **Created**: 2025-01-08
- **Last Updated**: 2025-01-08

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Web页面长截图

### 介绍

本示例实现了Web组件中网页长截图的方案，支持截图后展示大小浮窗预览、保存图片到相册、手势左滑关闭等功能。

### 效果预览
| ![image](screenshots/web.gif)

**使用说明**
1. 滑动页面，点击截图按钮截取此网页到滑动位置的长截图。
2. 大小预览窗口可切换，预览小窗口左滑可以关闭。
3. 点击保存图片按钮保存到相册。

### 工程目录

   ```
    ├──entry/src/main/ets/
    │  ├──common
    │  │  ├──Constants.ets               // 公共常量类
    │  │  ├──SnapFun.ets                 // 截图函数
    │  │  └──Utils.ets                   // 工具类库
    │  ├──entryability
    │  │  └──EntryAbility.ets            // 程序入口类
    │  └──pages                  
    │     └──Index.ets                   // 首页
    └──entry/src/main/resources          // 应用静态资源目录
   ```

### 具体实现

1. 创建Web组件加载指定的网页，获取Web组件和网页的实际尺寸，并给Web组件绑定自定义的id。
2. 通过webviewController调用webPageSnapshot获取绘制结果，并写入截图中。
3. 截图后弹出预览窗口，可以滚动查看完整的截图，并保存图片到用户相册中。

### 相关权限
1. 网络权限：ohos.permission.INTERNET

### 约束与限制

1. 本示例仅支持标准系统上运行，支持设备：华为手机。

2. HarmonyOS系统：HarmonyOS NEXT Release及以上。

3. DevEco Studio版本：DevEco Studio NEXT Release及以上。

4. HarmonyOS SDK版本：HarmonyOS NEXT Release SDK及以上。