在线体验
试着给图片加上水印。
选择示例或自己的图片，调整文字和 Logo，然后保存结果。所有处理只在当前浏览器中完成。
- 1选择内容
- 2调整样式
- 3保存或复制代码
实时预览
效果
图片地址
生成后会显示图片地址v1.9 · 变量 Recipe 与 Web Blob
一次选择多张图片，自动写入各自文件名。
当前文字、Logo 和导出设置会保存成一个 Recipe，文字会追加每张源文件的名称。Web 最多同时处理 4 张；结果仍按选择顺序排列。
尚未选择图片
选择两张或更多图片开始体验。
处理结果
0 / 0v1.12 · 跨端隐形追踪
画面看不出变化，也能找回短 ID。
把短 locator 写入图片像素，再用相同密钥验证。适合素材分发追踪；它不是 DRM，也不能证明图片从未被修改。
强度
验证哪种图片？
检测执行位置
页面中的密钥公开可见，只能用于演示。生产环境请使用随机 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 }, 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,
});- 文字水印
- Logo 水印
- 文字 + Logo
- 单个或平铺
- 透明度与描边
- 图层混合模式
- 位置与旋转
- 变量与条件 Recipe
- 隐形追踪水印
- Content Credentials 适配器
- PNG、JPEG 与 Web Blob
把这个效果用到项目里
下面的代码已经包含当前设置，可直接复制。