@2080code/pic-processer

介绍

用来对图片做压缩，把 File 对象转为 dataURL，又或者把 dataURL 转为 File 对象。

安装

npm install @2080code/pic-processer

使用

import PicProcesser from '@2080code/pic-processer'

或

<script src="lib/pic-processer.min.js"></script>

例子：

// 使用前先实例化一个对象：
const picProcesser = new PicProcesser()
// 应用：
picProcesser.getDataURL(file)
picProcesser.compress(file, 0.2)
picProcesser.getDataURL(file)

方法

compress

压缩图片质量、改变图片尺寸，输出 dataURL

picProcesser.compress(file, 0.2, 1000, 'image/png')

参数

参数|类型|默认值|说明 ---|---|---|--- file | File | null | 图片文件 ratio | number | 0.5 | 压缩比例，0-1 之间的小数 maxWidth | number | null | 图片宽度上限，>1的整数，单位px，0 或 null 表示不限制，输出图片的高度会等比例缩放 mime | string | image/jpeg | 输出图片类型

返回

返回值|类型|说明 ---|---|--- Promise<string> | Promise<string> | 压缩后的图片 dataURL 编码

注意：因为是借助 canvas 渲染输出，几乎是重绘了图片，所以如果压缩比率（ratio）设置得太高，最终文件字节可能会比原图更大

getDataURL

File 转 dataURL

picProcesser.getDataURL(file)

参数

参数|类型|默认值|说明 ---|---|---|--- file | File|Blob | null | 图片文件

返回

返回值|类型|说明 ---|---|--- Promise<FileReader> | Promise<FileReader> | 完整的 FileReader 对象，通过result属性获取 base64 编码

dataURLtoFile

dataURL 转 File 对象

picProcesser.dataURLtoFile('export.jpg', dataURL)

参数

参数|类型|默认值|说明 ---|---|---|--- fileName | string | null | 输出文件名 dataURL | string | null | base64编码

返回

返回值|类型|说明 ---|---|--- Promise<File> | Promise<File> | File 对象