tencent cloud

文档反馈

图文混合水印实战

最后更新时间:2023-02-24 16:33:53

    操作场景

    数据万象基础图片处理的水印功能支持在图片上添加 图片水印文字水印。但在现实的业务场景中,经常出现一张图片上既有固定的 Logo 水印,也有动态变化的文字水印(例如用户名)的情况。针对上述场景,我们提供了如下方案供您参考,您可结合实际业务场景,选择合适的接入方案。

    方案优势对比

    方案 优点 缺点
    方案一 接入简单,实现方便。 水印尺寸无法跟随图片大小进行动态变换,无法进行平铺操作。
    方案二 在图片尺寸多变的场景下,会达到比方案一更好的自适应效果。 接入流程更为繁琐,且会收取两次处理费用。

    操作方案

    方案一:使用管道操作符实现一条 URL 同时打上两种水印

    数据万象的基础图片处理功能支持使用 管道操作符 "|"实现一次请求、多次处理,且只计算一次处理和流量费用。使用这种方式可大幅减少重复请求带来的时延和额外费用。

    操作步骤

    1. 参见 图片水印 API 文档,定义图片水印的参数。
      如您不熟悉 API 参数,可参考 样式管理 文档,通过控制台新增样式,生成参数。

    处理参数如下:

    watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmc/dissolve/60/dx/10/dy/50/gravity/southeast
    
    说明:

    此处的编码aHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmc为水印图片链接(即存储在对象存储 bucket 上的图片链接)经过 URL 安全的 base64 编码后生成。

    1. 参见 文字水印 API 文档,定义文字水印的参数。
      如您不熟悉 API 参数,可参考 样式管理 通过控制台新增样式,生成参数。
    watermark/2/text/VUlOOiAxMjM0NTY3OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10
    
    说明:

    此处编码VUlOOiAxMjM0NTY3OA为文字信息UIN: 12345678经过 URL 安全的 base64 编码后生成。

    1. 使用管道操作符拼接图片水印和文字水印的两段参数:

      watermark/2/text/VUlOOiAxMjM0NTY3OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10|watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmc/gravity/southeast/dx/10/dy/50/dissolve/60 
      
    2. 将拼接的参数拼接至图片的下载链接后方:

      https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png?watermark/2/text/VUlOOiAxMjM0NTY3OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10|watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmc/gravity/southeast/dx/10/dy/50/dissolve/60 
      

    为了缩短 URL 长度,我们可以参考 样式管理 文档,在控制台将图片水印(保持不变)的部分新增为样式watermark1

    这样,链接即可缩短为:

    https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png/watermark1?watermark/2/text/VUlOOiAxMjM0NTY3OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10
    

    之后需要更改文字内容时,您只需将链接中VUlOOiAxMjM0NTY3OA部分替换为更新后的 base64 编码即可实现。例如UIN: 88888888的编码为VUlOOiA4ODg4ODg4OA,此时只需将链接更改为如下内容,即可实现文字内容的替换。

    https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png/watermark1?watermark/2/text/VUlOOiA4ODg4ODg4OA/font/SGVsdmV0aWNhLmRmb250/fontsize/36/fill/IzAwMDAwMA/dissolve/50/gravity/southeast/dx/10/dy/10
    

    方案二:将文字和图片水印打印到透明图片上,再将其作为图片水印

    1. 准备一张400px * 400px尺寸的透明 PNG 图片,上传至存储桶中。详情可参见 上传文件 文档。
      例如:https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/transparent.png
    2. 参见方案一的步骤1 - 步骤3,生成图片水印和文字水印两段参数,并将其拼接。
    3. 将拼接的参数拼接至透明 PNG 图片的下载链接后方:
      https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/transparent.png?watermark/2/text/VUlOOiAxMjM0NTY/font/SGVsdmV0aWNhLmRmb250/fontsize/48/fill/IzAwMDAwMA/dissolve/60/gravity/south/dx/0/dy/60|watermark/1/image/aHR0cDovL2V4YW1wbGVzLTEyNTgxMjU2MzguY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vbG9nby5wbmc/gravity/center/dx/0/dy/0/dissolve/71
      
    1. 将这张透明图片作为水印图片,对原图进行打水印操作即可:
      https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png?watermark/1/image/aHR0cDovL2V0ZXJuYXV4LTEzMDE0NTM1NTAuY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vdHJhbnNwYXJlbnQucG5nP3dhdGVybWFyay8yL3RleHQvVlVsT09pQXhNak0wTlRZL2ZvbnQvU0dWc2RtVjBhV05oTG1SbWIyNTAvZm9udHNpemUvNDgvZmlsbC9JekF3TURBd01BL2Rpc3NvbHZlLzYwL2dyYXZpdHkvc291dGgvZHgvMC9keS82MHx3YXRlcm1hcmsvMS9pbWFnZS9hSFIwY0RvdkwyVjBaWEp1WVhWNExURXpNREUwTlRNMU5UQXVZMjl6TG1Gd0xXZDFZVzVuZW1odmRTNXRlWEZqYkc5MVpDNWpiMjB2Ykc5bmJ5NXdibWMvZ3Jhdml0eS9jZW50ZXIvZHgvMC9keS8wL2Rpc3NvbHZlLzcx/gravity/southeast/dx/0/dy/0/dissolve/90
      

    您还可以通过scatype参数使水印图尺寸根据图片大小等比例缩放,并通过batch参数设置平铺。

    https://examples-1258125638.cos.ap-guangzhou.myqcloud.com/preview.png?watermark/1/image/aHR0cDovL2V0ZXJuYXV4LTEzMDE0NTM1NTAuY29zLmFwLWd1YW5nemhvdS5teXFjbG91ZC5jb20vdHJhbnNwYXJlbnQucG5nP3dhdGVybWFyay8yL3RleHQvVlVsT09pQXhNak0wTlRZL2ZvbnQvU0dWc2RtVjBhV05oTG1SbWIyNTAvZm9udHNpemUvNDgvZmlsbC9JekF3TURBd01BL2Rpc3NvbHZlLzYwL2dyYXZpdHkvc291dGgvZHgvMC9keS82MHx3YXRlcm1hcmsvMS9pbWFnZS9hSFIwY0RvdkwyVjBaWEp1WVhWNExURXpNREUwTlRNMU5UQXVZMjl6TG1Gd0xXZDFZVzVuZW1odmRTNXRlWEZqYkc5MVpDNWpiMjB2Ykc5bmJ5NXdibWMvZ3Jhdml0eS9jZW50ZXIvZHgvMC9keS8wL2Rpc3NvbHZlLzcx/scatype/3/spcent/30/gravity/southeast/dx/0/dy/0/dissolve/90/batch/1/degree/45
    
    联系我们

    联系我们,为您的业务提供专属服务。

    技术支持

    如果你想寻求进一步的帮助,通过工单与我们进行联络。我们提供7x24的工单服务。

    7x24 电话支持