@2080code/pic-processer 0.0.1 → 0.0.3

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 +34 -9
  2. package/demo/demo.html +3 -3
  3. package/package.json +6 -7
package/README.md CHANGED
@@ -1,5 +1,11 @@
1
- # pic-processer
2
- 图片压缩、改变图片尺寸、File和base64互转
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 对象。
3
9
 
4
10
  ## 安装
5
11
  ```bash
@@ -8,22 +14,31 @@ npm install @2080code/pic-processer
8
14
 
9
15
  ## 使用
10
16
  ```javascript
11
- import { compress, getDataURL, toFile } from '@2080code/pic-processer'
17
+ import PicProcesser from '@2080code/pic-processer'
12
18
  ```
13
19
  或
14
20
  ```html
15
21
  <script src="lib/pic-processer.min.js"></script>
16
22
  ```
23
+
24
+ 例子：
17
25
  ```javascript
18
- const picProcesser=new PicProcesser()
26
+ // 使用前先实例化一个对象：
27
+ const picProcesser = new PicProcesser()
28
+ // 应用：
29
+ picProcesser.getDataURL(file)
30
+ picProcesser.compress(file, 0.2)
31
+ picProcesser.getDataURL(file)
19
32
  ```
20
33
 
21
34
  ## 方法
22
- ### 压缩图片质量、改变图片尺寸
35
+ ### compress
36
+ 压缩图片质量、改变图片尺寸，输出 dataURL
23
37
 
24
38
  ```javascript
25
- picProcesser.compress(file,0.2,1000,'image/png')
39
+ picProcesser.compress(file, 0.2, 1000, 'image/png')
26
40
  ```
41
+ #### 参数
27
42
  参数|类型|默认值|说明
28
43
  ---|---|---|---
29
44
  `file` | File | `null` | 图片文件
@@ -31,33 +46,43 @@ picProcesser.compress(file,0.2,1000,'image/png')
31
46
  `maxWidth` | number | `null` | 图片宽度上限，>1的整数，单位px，`0` 或 `null` 表示不限制，输出图片的高度会等比例缩放
32
47
  `mime` | string | `image/jpeg` | 输出图片类型
33
48
 
49
+ #### 返回
34
50
  返回值|类型|说明
35
51
  ---|---|---
36
52
  `Promise<string>` | `Promise<string>` | 压缩后的图片 dataURL 编码
37
53
 
38
54
  *注意：因为是借助 canvas 渲染输出，几乎是重绘了图片，所以如果压缩比率（`ratio`）设置得太高，最终文件字节可能会比原图更大*
39
55
 
40
- ### File 转 dataURL
56
+ ### getDataURL
57
+ File 转 dataURL
58
+
41
59
  ```javascript
42
60
  picProcesser.getDataURL(file)
43
61
  ```
62
+ #### 参数
44
63
  参数|类型|默认值|说明
45
64
  ---|---|---|---
46
65
  `file` | File|Blob | `null` | 图片文件
47
66
 
67
+ #### 返回
48
68
  返回值|类型|说明
49
69
  ---|---|---
50
70
  `Promise<FileReader>` | `Promise<FileReader>` | 完整的 FileReader 对象，通过`result`属性获取 base64 编码
51
71
 
52
- ### dataURL 转 File
72
+ ### dataURLtoFile
73
+ dataURL 转 File 对象
74
+
53
75
  ```javascript
54
- picProcesser.dataURLtoFile('export.jpg',dataURL)
76
+ picProcesser.dataURLtoFile('export.jpg', dataURL)
55
77
  ```
78
+
79
+ #### 参数
56
80
  参数|类型|默认值|说明
57
81
  ---|---|---|---
58
82
  `fileName` | string | `null` | 输出文件名
59
83
  `dataURL` | string | `null` | base64编码
60
84
 
85
+ #### 返回
61
86
  返回值|类型|说明
62
87
  ---|---|---
63
88
  `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,7 +1,7 @@
1
1
  {
2
2
  "name": "@2080code/pic-processer",
3
- "version": "0.0.1",
4
- "description": "图片压缩、File和base64互转",
3
+ "version": "0.0.3",
4
+ "description": "图片压缩、改变图片尺寸、File 和 dataURL 互转",
5
5
  "main": "index.js",
6
6
  "types": "./src/types.ts",
7
7
  "type": "module",
@@ -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": {