# browserImageUtil

**Repository Path**: baojuhua/browserImageUtil

## Basic Information

- **Project Name**: browserImageUtil
- **Description**: web图片处理工具
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-03-22
- **Last Updated**: 2023-03-23

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

## browser-Image-Util

> browser-Image-Util 一个简单的浏览器端图片压缩与添加水印工具库。

### 安装

将本库复制到对应项目中，浏览器端可直接可引用`index.browser.js`

#### 函数

#### compressImage(input,options)

压缩图片

参数:

- `String|File|Blob|HTMLElement` input - 输入图片，支持 url，文件，Blob,img 节点
- `Object` options : 选项
- - `Number` options.size : 最大文件大小，默认为不限制
- - `Number` options.quality :固定质量 ，不设置的情况下进行自适应
- - `Number` options.maxQuality : 输出最大质量，默认为 0.96
- - `Number` options.minQuality : 输出最小质量，默认为 0.5
- - `Number` options.minWidth : 输出图片的最小宽度，默认为 800
- - `Number` options.minHeight : 输出图片的最小高度，默认为 800
- - `Number` options.accuracy : 压缩精度，允许在限制上下浮动,精度越低速度越快，范围为 0.8-0.99，默认为 0.95
- - `String` options.contentType : 输出图片格式类型，默认为 'image/jpeg'
- - `Boolean` options.detailed : 是否输出详细信息（用于输出调试信息），默认为 false

返回值:

- `Promise<Blob|Object>`: 返回 Blob 对象或包含详细信息的对象

```js
const blob = await compressImage('大图片地址.jpg', {
  size: 1024 * 1024 * 2, //限制大小为2MB
  //   quality: 0,// 固定图片质量
  maxQuality: 0.96, // 最大压缩质量
  minQuality: 0.5, // 最小压缩质量
  //   minWidth: 100, // 图片压缩最小宽度
  //   minHeight: 100, //图片压缩最小高度
  accuracy: 0.99, //压缩精度，允许在限制上下浮动,精度越低速度越快，范围为0.8-0.99，默认为0.95
  contentType: 'image/jpeg', //Blob文件格式
  detailed: false, //返回详细信息
});

const info = await compressImage('大图片地址.jpg', {
  size: 1024 * 1024 * 2, //限制大小为2MB
  //   quality: 0,// 固定图片质量
  maxQuality: 0.96, // 最大压缩质量
  minQuality: 0.5, // 最小压缩质量
  //   minWidth: 100, // 图片压缩最小宽度
  //   minHeight: 100, //图片压缩最小高度
  accuracy: 0.9, //压缩精度，允许在限制上下浮动,精度越低速度越快，范围为0.8-0.99，默认为0.95
  contentType: 'image/jpeg', //Blob文件格式
  detailed: true, //返回详细信息
});
```

![](imgs/demo1.png)

#### addWatermark(input,watermarkText,options)

给图片添加水印

参数:

- `String|File|Blob` input : 图片路径或文件
- `String` watermarkText : 水印文字
- `Object` options : 配置项
- `Number|String` options.fontSize : 字体大小 12(默认)
- `String` options.fontFamily : 字体
- `String|Function` options.color : 字体颜色
- `String|Array` options.position : 位置,字符串：t、l、r、b、tr、tl、bl、br，数组时为[x,y]
- `Number` options.angle : 旋转角度
- `Number` options.repeat : 重复间隔
- `Number` options.lineHeight : 行间间隔
- `Number` options.quality : 输出质量 0.8(默认)
- `String` options.contentType : 输出图片格式类型:'image/jpeg'(默认)
- `String` options.resultType : 输出类型:blob base64 canvas(默认)
- `Number` options.size : 输出压缩大小

返回值:

- `Promise<Blob|Canvas|String>`: 根据参数 options.resultType 适配

不压缩只添加水印示例:

```js
img.src = await addWatermark('https://browser6.qhimg.com/dmfd/290_164_/t0111d2fa06185f6764.jpg', '水印文字', {
  fontSize: 20,
  color: 'rgba(255, 255, 255, 0.6)',
  angle: 0,
  position: 'b',
});

img.src = await addWatermark('https://browser6.qhimg.com/dmfd/290_164_/t0111d2fa06185f6764.jpg', '水印文字', {
  fontSize: 20,
  color: 'rgba(255, 255, 255, 0.6)',
  position: 'tr', //右上角
});

img.src = await addWatermark('https://browser6.qhimg.com/dmfd/290_164_/t0111d2fa06185f6764.jpg', '水印文字', {
  fontSize: 30,
  color: 'rgba(250, 100, 20, 0.2)',
  angle: -45, //旋转 -45°
  position: [0, 0], //自定义坐标
});

img.src = await addWatermark('https://browser6.qhimg.com/dmfd/290_164_/t0111d2fa06185f6764.jpg', '水印文字', {
  fontSize: 20,
  color: 'rgba(255, 255, 255, 0.2)',
  angle: 45, //旋转 45°
  repeat: 100, // 水印间距
  lineHeight: -60, // 行间距
});
```

![](imgs/demo2.png)

压缩并添加水印示例:

```js
blob = await addWatermark('https://browser6.qhimg.com/dmfd/290_164_/t0111d2fa06185f6764.jpg', '水印文字', {
  fontSize: 20,
  color: 'rgba(255, 255, 255, 0.2)',
  angle: 45, //旋转 45°
  repeat: 100, // 水印间距
  lineHeight: -60, // 行间距
  size: 1024 * 1024 * 2, //限制大小为2MB
  resultType: 'blob', // 返回blob
});
```

![](imgs/demo3.png)

压缩并添加彩色水印示例

```js
blob = await addWatermark('https://browser6.qhimg.com/dmfd/290_164_/t0111d2fa06185f6764.jpg', '水印文字', {
  color: () => {
    const letters = '0123456789ABCDEF';
    let color = '#';
    for (let i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  },
  fontSize: 100,
  lineHeight: -260,
  angle: 45, //旋转 45°
  size: 1024 * 1024 * 2, //限制大小为2MB
  resultType: 'blob', // 返回blob
});
```

![](imgs/demo4.png)

#### canvasToBlob(canvas,type,quality)

将 canvas 转为 Blob，使用 `await` 调用
参考:[https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob](https://developer.mozilla.org/zh-CN/docs/Web/API/HTMLCanvasElement/toBlob)

- `HTMLElement` canvas
- `String` type : 类型
- `Number` quality : 清晰度

返回值:

- `Promise<Blob>`

#### cloneCanvas(oldCanvas,ratio)

克隆 canvas

- `canvas` oldCanvas : 被克隆的 canvas
- `Number` ratio : 缩放比

返回值:

- `canvas`:新的 canvas

#### getCanvasImageContentType(input)

获取 canvas 支持下的图片文件格式

- `String|File|Blob` input : 图片路径或文件

返回值:

- `String`:图片文件格式

#### imageToCanvas(input)

将图片转为 canvas

- `String|File|Blob|HTMLElement` input : 图片路径或文件

返回值:

- `canvas`

#### compressCanvasToBlob(canvas,options)

压缩 canvasToBlob，限制 canvas 导出的 blob 大小

- `HTMLCanvasElement` canvas : 用于导出图片的 canvas 元素
- `Object` options : 选项
- `Number` options.size : 最大文件大小，默认为不限制
- `Number` options.quality : 固定质量 ，不设置的情况下进行自适应
- `Number` options.maxQuality : 输出最大质量，默认为 0.96
- `Number` options.minQuality : 输出最小质量，默认为 0.5
- `Number` options.minWidth : 输出图片的最小宽度，默认为 800
- `Number` options.minHeight : 输出图片的最小高度，默认为 800
- `Number` options.accuracy : 压缩精度，允许在限制上下浮动,精度越低速度越快，范围为 0.8-0.99，默认为 0.95
- `String` options.contentType : 输出图片格式类型，默认为 'image/jpeg'
- `Boolean` options.detailed : 是否输出详细信息（可用于调试查看压缩信息），默认为 false

返回值:

- `Promise<Blob|Object>` 返回 Blob 对象或包含详细信息的对象