安装

React Native Image Marker 在 iOS 和 Android 上使用原生代码，在 Web 上使用 Canvas 2D 实现。只需安装一次；原生目标需要链接并重新构建，Web 则直接在浏览器中运行。

本页安装 Core 2.1。按需添加工具链包即可： Editor 0.3、Recipe 0.1、 Node 0.1 或 CLI 0.1。

浏览器专用应用安装独立 Web 包。
Terminal window
```
npm install @image-marker/web@0.1.0
```
现有 Expo Web 应用可以继续使用 react-native-image-marker；独立包面向不安装 React Native 的 Web 构建。
如果项目包含 iOS 目标，请安装 iOS Pods。
Terminal window
```
npx pod-install
```

重新构建原生应用。

npx react-native run-android
# or
npx react-native run-ios

安装软件包和 Expo 开发客户端。

npx expo install react-native-image-marker expo-dev-client

在本地构建并安装原生应用。
Terminal window
```
npx expo run:android
# or
npx expo run:ios
```
也可以使用 EAS Build 创建并安装开发构建。
安装原生应用后，启动开发服务器。
Terminal window
```
npx expo start
```

安装软件包。
Terminal window
```
npm install react-native-image-marker
```
传入浏览器可读取的图像源，例如 URL、数据 URL、Blob、File 或 { uri }。
```
const backgroundImage = { src: '/images/background.jpg' };
```
在 Expo Web 中，请先转换数字形式的打包资源：
```
import { Asset } from 'expo-asset';

const backgroundImage = {
  src: { uri: Asset.fromModule(require('./background.jpg')).uri },
};
```
如果项目尚未直接依赖资源解析器，请运行 npx expo install expo-asset。
从 @image-marker/web 导入 Marker，调用 Marker.markText、 Marker.markImage 或 Marker.mark。Web 端可显示或下载 result.uri。

添加第一个水印

Marker.markText 会渲染一个或多个文本图层，并返回结构化结果。result.uri 是生成的原生路径或 Web data URL。

import Marker, { ImageFormat, Position } from 'react-native-image-marker';

const result = await Marker.markText({
  backgroundImage: {
    src: require('./images/background.jpg'),
  },
  watermarkTexts: [
    {
      text: '© Acme Studio',
      position: {
        position: Position.bottomRight,
        X: 24,
        Y: 24,
      },
      style: {
        color: '#FFFFFF',
        fontSize: 28,
      },
    },
  ],
  filename: 'marked-photo',
  saveFormat: ImageFormat.jpg,
  quality: 92,
});

console.log(result.uri, result.jobId, result.durationMs);

如需仅包含图像的图层或混合图层，请参阅选择 API。

支持的图像源

在 iOS 和 Android 上，可以使用 React Native 中已有的相同图像源形式：

通过 require('./image.png') 引入的打包资源
React Native 图像加载器支持的 URI 对象或远程 URI
完整的 data:image/...;base64,... 数据 URL

在 Web 上，可使用 URL 字符串、{ uri }、数据 URL、Blob、File 或已加载的浏览器图像。远程 URL 必须允许 CORS；数字形式的 React Native 资源 ID 需要先解析成 URL。

原生 JPEG、PNG 和平台支持的 WebP 输出会写入平台缓存目录；Web 输出始终是数据 URL，原生端请求 ImageFormat.base64 时也会返回内存中的数据 URL。URI 始终位于 result.uri。