1 | # create-puzzle
|
2 |
|
3 | [![npm][npm]][npm-url] ![GitHub](https://img.shields.io/github/license/caijf/create-puzzle.svg)
|
4 |
|
5 | 在浏览器端生成滑块验证码的拼图和背景图。
|
6 |
|
7 | 可以在客户端生成拼图,也可以使用它生成的拼图放到服务端图库,推荐搭配 [rc-slider-captcha] 使用。
|
8 |
|
9 | 如果你使用的是 Node.js 做服务端,推荐使用 [`node-puzzle`](https://www.npmjs.com/package/node-puzzle)。
|
10 |
|
11 | ## 在线示例
|
12 |
|
13 | - [文档站点][site]
|
14 | - [拼图生成器][generator]
|
15 |
|
16 | [![拼图生成器](./docs/generator.jpg)][generator]
|
17 |
|
18 | ## 使用
|
19 |
|
20 | ### es
|
21 |
|
22 | 安装依赖
|
23 |
|
24 | ```shell
|
25 | npm install create-puzzle
|
26 | ```
|
27 |
|
28 | ```shell
|
29 | yarn add create-puzzle
|
30 | ```
|
31 |
|
32 | ```shell
|
33 | pnpm add create-puzzle
|
34 | ```
|
35 |
|
36 | 项目中使用
|
37 |
|
38 | ```typescript
|
39 | import createPuzzle from 'create-puzzle';
|
40 |
|
41 | createPuzzle(imgUrl).then((res) => {
|
42 | console.log(res);
|
43 | // {
|
44 | // bgUrl: "data:image/jpeg;base64,/9j/4AAQSk...",
|
45 | // puzzleUrl : "data:image/png;base64,iVBORw0KGgo...",
|
46 | // x: 60,
|
47 | // y: 0
|
48 | // }
|
49 | });
|
50 | ```
|
51 |
|
52 | ### 原生 js 开发环境
|
53 |
|
54 | 如果你的项目使用的是原生方式开发,可以在浏览器中使用 script 标签直接引入文件,并使用全局变量 createPuzzle 。
|
55 |
|
56 | npm 包的 dist 目录下提供了 UMD 包 createPuzzle.js 以及 createPuzzle.min.js。你也可以通过 [UNPKG](https://unpkg.com/create-puzzle/dist/) 下载到本地进行使用。或者直接使用 [UNPKG 线上版本](https://unpkg.com/create-puzzle@latest/dist/createPuzzle.min.js)<sup>注意版本</sup>。
|
57 |
|
58 | ## API
|
59 |
|
60 | ```javascript
|
61 | function createPuzzle(imgUrl: string | Blob, options?: Options): Promise<Result>;
|
62 |
|
63 | type Options = {
|
64 | // 拼图
|
65 | borderWidth?: number; // 描边宽度。默认 2
|
66 | borderColor?: string; // 描边颜色。默认 rgba(255,255,255,0.7)
|
67 | fillColor?: string; // 填充颜色。默认 rgba(255,255,255,0.7)
|
68 | points?: 2 | 3 | 4 | {
|
69 | top: Point;
|
70 | right: Point;
|
71 | bottom: Point;
|
72 | left: Point;
|
73 | }; // 拼图点,不传默认随机2/3/4
|
74 | width?: number; // 宽度。默认 60
|
75 | height?: number; // 高度。默认 60
|
76 | x?: number; // x 轴偏移值,如果不传内部随机生成。
|
77 | y?: number; // y 轴偏移值,如果不传内部随机生成。
|
78 | margin?: number; // 上下左右留白。默认 2
|
79 |
|
80 | // 背景图
|
81 | bgWidth?: number; // 背景图宽度。默认 图片宽度
|
82 | bgHeight?: number; // 背景图高度。默认 图片高度
|
83 | bgOffset?: [number, number] | ((imgWidth: number, imgHeight: number) => [number, number]); // 背景图偏移值。 默认 [0,0]
|
84 |
|
85 | // 上传的图片
|
86 | imageWidth?: number; // 自定义输入图片宽度。
|
87 | imageHeight?: number; // 自定义输入图片高度。
|
88 | cacheImage?: boolean | CacheOptions; // 缓存最近加载成功的图片。默认为 true 。更多信息可查阅:https://doly-dev.github.io/util-helpers/global.html#CacheOptions
|
89 | ajaxOptions?: AjaxOptions; // ajax 请求配置项,当传入的图片为字符串时才会触发请求。更多信息可查阅: https://doly-dev.github.io/util-helpers/global.html#AjaxOptions
|
90 |
|
91 | // 导出图片
|
92 | bgImageType?: string; // 背景图导出类型。默认 image/jpeg
|
93 | quality?: number; // 导出图片质量。默认 0.8 。
|
94 | format?: 'dataURL' | 'blob'; // 导出图片格式。默认 dataURL 。
|
95 | autoRevokePreviousBlobUrl?: boolean; // 自动释放之前导出的 blob url ,仅在 format='blob' 时生效。默认 true 。
|
96 | }
|
97 |
|
98 | type Result = {
|
99 | bgUrl: string; // 背景图
|
100 | puzzleUrl: string; // 拼图
|
101 | x: number; // x 轴偏移值。如果使用该值校验,建议前后阈值增减 5 的范围
|
102 | y: number; // y 轴偏移值,等高拼图时值始终为 0
|
103 | }
|
104 |
|
105 | // 拼图点
|
106 | enum Point {
|
107 | None, // 没有
|
108 | Outer, // 外部
|
109 | Inner // 内部
|
110 | }
|
111 | ```
|
112 |
|
113 | [site]: https://caijf.github.io/create-puzzle/index.html
|
114 | [generator]: https://caijf.github.io/create-puzzle/index.html#/generator
|
115 | [rc-slider-captcha]: https://caijf.github.io/rc-slider-captcha/index.html
|
116 | [npm]: https://img.shields.io/npm/v/create-puzzle.svg
|
117 | [npm-url]: https://npmjs.com/package/create-puzzle
|