视觉示例集

这些图片来自仓库中的示例用例。先用它们确认你需要的功能，再按照相应指南使用当前代码。

带有颜色、样式和锚点定位的文字图层

缩放后定位于背景之上的图片图层

多个拥有独立样式的文字图层

旋转后的图片图层

常用配方

低调的角落签名

await Marker.markText({
  backgroundImage: { src: photo },
  watermarkTexts: [
    {
      text: '© Acme Studio',
      position: { position: Position.bottomRight, X: 20, Y: 20 },
      style: { color: '#FFFFFFB3', fontSizeRatio: 0.022 },
    },
  ],
  saveFormat: ImageFormat.jpg,
  quality: 92,
});

清晰的二维码水印

await Marker.markImage({
  backgroundImage: { src: photo },
  watermarkImages: [
    {
      src: qrCode,
      position: { position: Position.bottomLeft, X: 24, Y: 24 },
      scale: 0.5,
      trimTransparentPadding: true,
    },
  ],
  saveFormat: ImageFormat.png,
});

位于文字标签下方的 Logo

使用 Marker.mark 时，后面的图层会绘制在前面的图层之上。

await Marker.mark({
  backgroundImage: { src: photo },
  watermarks: [
    {
      type: 'image',
      src: logo,
      position: { position: Position.center },
      alpha: 0.8,
    },
    {
      type: 'text',
      text: 'APPROVED',
      position: { position: Position.center },
      style: { color: '#FFFFFF', fontSize: 32, bold: true },
    },
  ],
  saveFormat: ImageFormat.png,
});

如需免安装体验 Web SDK，请打开在线体验。如需使用原生交互控件和查看架构状态面板，请运行 React Native 示例或 Expo 示例。