@2080code/pic-processer 0.0.2 → 0.0.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/README.md +25 -9
  2. package/demo/demo.html +3 -3
  3. package/package.json +5 -6
package/README.md CHANGED
@@ -1,14 +1,24 @@
1
- # pic-processer
2
- 图片压缩、改变图片尺寸、File 和 dataURL 互转
1
+ # @2080code/pic-processer
2
+ ![NPM Version](https://img.shields.io/npm/v/%402080code%2Fpic-processer?label=NPM%20Version)
3
+ ![npm package minimized gzipped size](https://img.shields.io/bundlejs/size/%402080code%2Fpic-processer?format=both&label=NPM%20Package%20Size)
4
+ ![NPM Last Update](https://img.shields.io/npm/last-update/%402080code%2Fpic-processer?label=NPM%20Last%20Update)
5
+ ![NPM Downloads](https://img.shields.io/npm/dw/%402080code%2Fpic-processer?label=NPM%20Downloads)
6
+
7
+ ## 介绍
8
+ 用来对图片做压缩，把 File 对象转为 dataURL，又或者把 dataURL 转为 File 对象。
9
+
10
+ ---
3
11
 
4
12
  ## 安装
5
13
  ```bash
6
14
  npm install @2080code/pic-processer
7
15
  ```
8
16
 
17
+ ---
18
+
9
19
  ## 使用
10
20
  ```javascript
11
- import picProcesser from '@2080code/pic-processer'
21
+ import PicProcesser from '@2080code/pic-processer'
12
22
  ```
13
23
  或
14
24
  ```html
@@ -25,6 +35,8 @@ picProcesser.compress(file, 0.2)
25
35
  picProcesser.getDataURL(file)
26
36
  ```
27
37
 
38
+ ---
39
+
28
40
  ## 方法
29
41
  ### compress
30
42
  压缩图片质量、改变图片尺寸，输出 dataURL
@@ -32,7 +44,7 @@ picProcesser.getDataURL(file)
32
44
  ```javascript
33
45
  picProcesser.compress(file, 0.2, 1000, 'image/png')
34
46
  ```
35
- #### 参数
47
+ ##### 参数
36
48
  参数|类型|默认值|说明
37
49
  ---|---|---|---
38
50
  `file` | File | `null` | 图片文件
@@ -40,29 +52,33 @@ picProcesser.compress(file, 0.2, 1000, 'image/png')
40
52
  `maxWidth` | number | `null` | 图片宽度上限，>1的整数，单位px，`0` 或 `null` 表示不限制，输出图片的高度会等比例缩放
41
53
  `mime` | string | `image/jpeg` | 输出图片类型
42
54
 
43
- #### 返回
55
+ ##### 返回
44
56
  返回值|类型|说明
45
57
  ---|---|---
46
58
  `Promise<string>` | `Promise<string>` | 压缩后的图片 dataURL 编码
47
59
 
48
60
  *注意：因为是借助 canvas 渲染输出，几乎是重绘了图片，所以如果压缩比率（`ratio`）设置得太高，最终文件字节可能会比原图更大*
49
61
 
62
+ ---
63
+
50
64
  ### getDataURL
51
65
  File 转 dataURL
52
66
 
53
67
  ```javascript
54
68
  picProcesser.getDataURL(file)
55
69
  ```
56
- #### 参数
70
+ ##### 参数
57
71
  参数|类型|默认值|说明
58
72
  ---|---|---|---
59
73
  `file` | File|Blob | `null` | 图片文件
60
74
 
61
- #### 返回
75
+ ##### 返回
62
76
  返回值|类型|说明
63
77
  ---|---|---
64
78
  `Promise<FileReader>` | `Promise<FileReader>` | 完整的 FileReader 对象，通过`result`属性获取 base64 编码
65
79
 
80
+ ---
81
+
66
82
  ### dataURLtoFile
67
83
  dataURL 转 File 对象
68
84
 
@@ -70,13 +86,13 @@ dataURL 转 File 对象
70
86
  picProcesser.dataURLtoFile('export.jpg', dataURL)
71
87
  ```
72
88
 
73
- #### 参数
89
+ ##### 参数
74
90
  参数|类型|默认值|说明
75
91
  ---|---|---|---
76
92
  `fileName` | string | `null` | 输出文件名
77
93
  `dataURL` | string | `null` | base64编码
78
94
 
79
- #### 返回
95
+ ##### 返回
80
96
  返回值|类型|说明
81
97
  ---|---|---
82
98
  `Promise<File>` | `Promise<File>` | File 对象
package/demo/demo.html CHANGED
@@ -145,9 +145,9 @@
145
145
  `
146
146
 
147
147
  document.getElementById('file-info').innerHTML=`
148
- <div>name: <em>${exportedFile.name}</em></div>
149
- <div>size: <em>${exportedFile.size} byte</em></div>
150
- <div>type: <em>${exportedFile.type}</em></div>
148
+ name: <em>${exportedFile.name}</em><br/>
149
+ size: <em>${exportedFile.size} byte</em><br/>
150
+ type: <em>${exportedFile.type}</em>
151
151
  `
152
152
  }
153
153
  </script>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@2080code/pic-processer",
3
- "version": "0.0.2",
3
+ "version": "0.0.4",
4
4
  "description": "图片压缩、改变图片尺寸、File 和 dataURL 互转",
5
5
  "main": "index.js",
6
6
  "types": "./src/types.ts",
@@ -15,12 +15,11 @@
15
15
  "url": "git+https://github.com/2080code/pic-processer.git"
16
16
  },
17
17
  "keywords": [
18
- "watermark",
19
- "html",
20
- "svg",
18
+ "picture",
19
+ "compress",
20
+ "base64",
21
+ "dataURL",
21
22
  "js",
22
- "css",
23
- "background",
24
23
  "canvas"
25
24
  ],
26
25
  "publishConfig": {