@ysfe/watermark

描述: 通用水印插件

前置依赖

• axios
• is-url

开发指引

传送门

使用方式

1. 安装: 执行 yarn add @ysfe/watermark
2. 简单使用:

const outImage: string = await watermark(sourceImage, watermarkImage, {
    /* options|可选 */
}) // return base64

参数说明

参数及用法, 请看 ./src 或 单测用例

| 参数 | 描述 | 类型 | 是否必填 | 其他说明 | | -------------- | -------- | ---------------------------- | -------- | -------- | | sourceImage | 原始图片 | HTMLImageElement/File/string | [x] | | | watermarkImage | 水印图片 | HTMLImageElement/File/string | [x] | | | options | 可选参数 | IOptions ｜ | [] | |

IOptions

{
  size?: 'origin' | 'fill'
  align?: 'center' | 'lt' | 'lb' | 'rt' | 'rb'
  alpha?: number
  dataUrlType?: string
  quality?: number
}

实现方案

原理: 基于 canvas 图层叠加实现水印效果.

Plan

• 图片加载
  • Image Url 加载 - 通过 axios(responseType:arraybuffer) 加载图片资源, 然后, 将 buffer 转化为 base64, 并创建 Image 对象
  • FIle 对象, 通过 FileRender()读取文件 buffer 流, 然后转化 Image 对象.
  • Image 对象, 跳过, 直接进行下一步
• canvas 绘制与导出
  • 绘制: 通过 ctx.drawImage()进行图片绘制. 关键点在于 canvas 尺寸设置和不同定位方式的定位计算公式. 每次绘制完成后, 要通过 ctx.store() 还原画笔位置
  • 导出 注意导出格式为 image/png 导出后, 需要额外补充 data:image/png;base64,

注意事项

• 本插件不适用于不支持 HTML5 的旧浏览器。
• 不能使用根据域名限制服务器 CORS headers 的图像。如果这个服务器在你的权限管理中，你需要如下设置 Apache：

 Header set Access-Control-Allow-Origin "*"
 Header set Access-Control-Allow-Headers "referer, range, accept-encoding, x-requested-with"

[其他说明事项]

版本日志

• 2021 年 07 月 19 日 15:06:25
  • 增加 base64ToFile 方法.