在线体验

试着给图片加上水印。

选择示例或自己的图片，调整文字和 Logo，然后保存结果。所有处理只在当前浏览器中完成。

图片不上传

1. 1选择内容
2. 2调整样式
3. 3保存或复制代码

可见水印文字、Logo、平铺与样式批量处理 Core 2Recipe、进度与 Blob隐形追踪 Core 2短 ID、缩放验证与 Worker交互编辑器 0.3.0图层、拖拽、撤销与 Recipe v2

实时预览

效果

自动更新预览关闭后可一次调整多项，再点击更新预览。恢复示例

正在渲染…

可以开始尺寸 —耗时 —

图片地址生成后会显示图片地址

复制图片地址⧉

更新预览保存图片

想添加什么？

只加文字只加 Logo文字 + Logo

一键示例选择后仍可继续调整

普通文字 + Logo两个单点图层高对比文字描边明暗底图都清楚平铺文字错行、间距、旋转平铺 Logo一次解码，多处绘制半透明文字整个文字图层 40%自然融合Screen 文字 + Multiply Logo

底图

选择本地底图使用内置底图

本地图片不会离开你的设备。刷新页面后，选择的文件会被清除。

文字设置

文字内容

颜色#FFFFFF字号

42 px

文字透明度

85%

混合模式

普通⌄

粗体

文字描边描边颜色#101828描边宽度

2 px

排列方式

单个平铺

位置、旋转与平铺间距

旋转

−7°

位置

左下⌄

X 偏移Y 偏移

Logo 设置

选择本地 Logo使用内置 Logo

透明度

100%

缩放

72%

混合模式

普通⌄

排列方式

单个平铺

位置、旋转与平铺间距

旋转

0°

位置

右上⌄

X 偏移Y 偏移

保存设置

格式

PNG⌄

质量

92

JPEG 的质量差异最明显；PNG 通常忽略此值。

Core 2 · 变量 Recipe 与 Web Blob

一次选择多张图片，自动写入各自文件名。

当前文字、Logo 和导出设置会保存成一个 Recipe，文字会追加每张源文件的名称。Web 最多同时处理 4 张；结果仍按选择顺序排列。

选择多张图片尚未选择图片

选择两张或更多图片开始体验。

开始批量处理停止后续任务

处理结果

0 / 0

Core 2 · 跨端隐形追踪

画面看不出变化，也能找回短 ID。

把短 locator 写入图片像素，再用相同密钥验证。适合素材分发追踪；它不是 DRM，也不能证明图片从未被修改。

等待嵌入

短 ID（最多 12 个 UTF-8 字节）演示密钥

强度

耐压缩⌄

验证哪种图片？

原始结果⌄

检测执行位置

Web Worker⌄

嵌入并预览验证当前结果停止检测

页面中的密钥公开可见，只能用于演示。生产环境请使用随机 locator，并在可信服务端或受控客户端中管理密钥。

批量分发代码

const embedded = await Marker.embedInvisibleMany(
  recipients.map((recipient) => ({
    image: { src: source },
    payload: recipient.locator,
    key,
    strength: 'robust',
  })),
  { concurrency: 4, signal, onProgress }
);

const verified = await Marker.detectInvisibleMany(
  embedded.flatMap((result) =>
    result.status === 'fulfilled'
      ? [{ image: { src: result.value.uri }, key, search: 'robust' }]
      : []
  )
);

组合签名内容凭证

此处只展示工作流，不会把图片发送到本站服务。签名必须交给你自己的可信服务端。

const signed = await Marker.embedInvisibleWithCredentials({
  watermark: { image: { src: source }, payload: locator, key },
  claim: { title: 'distribution-copy.png', format: 'image/png' },
  adapter: yourServerAdapter,
});

const credentials = await Marker.verifyContentCredentials({
  image: signed.signedImage,
  adapter: yourServerAdapter,
});

查看 C2PA 服务示例

可选包 · Editor 0.3.0

直接操作 Recipe v2

这个演示由 Editor controller 驱动：多选、复制、分组、对齐、拖动、缩放和旋转，再通过 Core 2.1 渲染真实结果。

添加文字添加图片全选复制图层分组解组画布居中撤销重做Core 预览导出原图

图层

所选图层

缩放

1.00×

旋转

0°

隐藏锁定删除

Editor 可交互画布Core 渲染结果

Core 渲染结果

拖动任意图层开始编辑。

React Native 使用代码实时 Recipe v2

下面的完整组件使用 Core 2.1 自动读取原图尺寸，并展示 Editor 0.3 的正式面板。

复制代码

import * as React from 'react';
import { Button, Image, StyleSheet, View } from 'react-native';
import {
  ImageMarkerEditor,
  ImageMarkerEditorAssetPanel,
  ImageMarkerEditorController,
  ImageMarkerEditorInspector,
  ImageMarkerEditorLayerPanel,
  ImageMarkerEditorToolbar,
} from 'react-native-image-marker-editor';
import { createCoreEditorAdapter } from 'react-native-image-marker-editor/core-adapter';

const background = require('./background.jpg');
const logo = require('./logo.png');
const adapter = createCoreEditorAdapter(1024);

export function WatermarkEditor() {
  const controller = React.useMemo(
    () =>
      new ImageMarkerEditorController({
        schemaVersion: 2,
        layers: [
          {
            id: 'title',
            type: 'text',
            text: 'IMAGE MARKER 2.1',
            position: { X: 160, Y: 120 },
            style: { color: '#FFFFFF', fontSize: 64, bold: true },
          },
          {
            id: 'logo',
            type: 'image',
            src: logo,
            position: { X: 1280, Y: 720 },
            scale: 0.4,
          },
        ],
        output: { saveFormat: 'png' },
      }),
    []
  );
  const [resultUri, setResultUri] = React.useState<string>();

  const preview = async () => {
    const result = await adapter.renderPreview({
      recipe: controller.exportRecipe(),
      input: { backgroundImage: { src: background } },
    });
    setResultUri(result.uri);
  };

  const exportOriginal = async () => {
    const result = await adapter.exportOriginal({
      recipe: controller.exportRecipe(),
      input: { backgroundImage: { src: background } },
    });
    setResultUri(result.final.uri);
  };

  return (
    <View>
      <ImageMarkerEditorToolbar controller={controller} />
      <ImageMarkerEditor
        adapter={adapter}
        background={
          <Image
            resizeMode="contain"
            source={background}
            style={StyleSheet.absoluteFill}
          />
        }
        controller={controller}
        source={background}
        width={360}
        height={203}
      />
      <ImageMarkerEditorLayerPanel controller={controller} />
      <ImageMarkerEditorInspector controller={controller} />
      <ImageMarkerEditorAssetPanel
        assets={[{ id: 'logo', name: 'Logo', source: logo }]}
        controller={controller}
      />
      <Button title="Render Core preview" onPress={preview} />
      <Button title="Export original" onPress={exportOriginal} />
      {resultUri && (
        <Image
          resizeMode="contain"
          source={{ uri: resultUri }}
          style={{ width: 360, height: 203 }}
        />
      )}
    </View>
  );
}

仓库使用指南Editor API 参考

实时 Recipe v2

复制 Recipe

主要功能都可以直接试

• 文字水印
• Logo 水印
• 文字 + Logo
• 单个或平铺
• 透明度与描边
• 图层混合模式
• 位置与旋转
• 变量与条件 Recipe
• 隐形追踪水印
• 交互式图层编辑器
• Content Credentials 适配器
• PNG、JPEG 与 Web Blob

把这个效果用到项目里

下面的代码已经包含当前设置，可直接复制。

复制代码

WebReact Native

Web 与原生输出有什么不同？

保存结果

Web 返回可直接预览和保存的图片地址；iOS 和 Android 返回临时文件路径。

外观差异

浏览器和手机使用的字体绘制方式不同，文字大小和边缘可能有轻微差别。

远程图片

使用其他网站的图片时，对方服务器需要允许跨域访问（CORS）。