watermark - 水印工具

持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第3天，点击查看活动详情

自己动手开发一款好用的前端水印工具~

npm: www.npmjs.com/package/@ys…

git: gitlab.yslocal.com/fe-basic/op…

描述: 通用水印插件

前置依赖

• axios
• is-url

使用方式

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

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

参数说明

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

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

interface IOptions

{
  // 填充尺寸: 原始, 铺满(根据sourceImage自适应). 默认: fill
  size?: 'origin' | 'fill'
  // 水印定位方式, 默认: center
  align?: 'center' | 'lt' | 'lb' | 'rt' | 'rb'
  // 水印透明度, 默认: 0.3
  alpha?: number
  // 导出图片格式, 默认: data:image/png
  dataUrlType?: string
  // 图片压缩质量, 默认: 0.7
  quality?: number
}

实现方案

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

Plan

1. 图片加载

1. 1. Image Url 加载 - 通过axios(responseType:arraybuffer) 加载图片资源, 然后, 将buffer转化为base64, 并创建 Image对象
   2. FIle 对象, 通过 FileRender()读取文件buffer流, 然后转化 Image对象.
   3. Image 对象, 跳过, 直接进行下一步

2. canvas 绘制与导出

1. 1. 绘制: 通过 ctx.drawImage() 进行图片绘制.

1. 1. 1. 关键点在于canvas尺寸设置和不同定位方式的定位计算公式.
      2. 每次绘制完成后, 要通过 ctx.store() 还原画笔位置

1. 2. 导出

1. 1. 1. 注意导出格式为 image/png
      2. 导出后, 需要额外补充 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"

---

[其他说明事项]