# imgViewer

**Repository Path**: cznic/img-viewer

## Basic Information

- **Project Name**: imgViewer
- **Description**: 一个简单的图片查看器，支持放大，缩小，拖拽，旋转，编辑
- **Primary Language**: JavaScript
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 1
- **Created**: 2022-08-03
- **Last Updated**: 2022-08-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# imgviewer #

图片预览器，可以对图片进行放大，缩小，拖拽，旋转，复位，下载和图片的编辑功能（包括画框，画圆，文本，箭头，马赛克，撤回，下载功能）。当前图片的编辑功能也可以单独使用，后面我将继续对其优化，增加更多的灵活性。

### 使用方式

使用`ES6 import`或者`iife`的方式

example:http://81.70.151.250:9090/imgviewer/

#### iife的方式：

下载这个index.js放到你的项目中使用script标签引入:http://81.70.151.250:9090/imgviewer/index.js

```js
//script引入 会导出ImgViewer类
<script src="index.js"></script>
// 使用
const ImgViewer = imgviewer.default; // 获取imgviewer类
const useScale = imgviewer.useScale; // 获取放大缩小插件
const useDrag = imgviewer.useDrag; // 获取拖拽插件
const useEditPic = imgviewer.useEditPic; // 获取编辑的插件
const useDownloadImg = imgviewer.useDownloadImg; // 获取下载的插件
const useOperateCont = imgviewer.useOperateCont; // 获取操作栏的插件
const container = document.getElementById('imgcont');
const target = document.getElementById('img');
const imgViewer = new ImgViewer({container,target}); // 实例化imgviewer类
const editOptions = {
    imgUrl: target.src, // 图片地址
    width: 900, // canvas展示的宽高
    height: 600, // canvas展示的宽高
    // 编辑时操作的选项
    operateArray：				   ['lastPic','drag','rect','circle','text','arrow','mosaic','revocation','downloadPic'],
    // 控制显示操作项选项
    showOperateSel: ['rect','circle','text','arrow'],
}
// 使用各插件
imgViewer
.use(useScale())
.use(useDrag())
.use(useDownloadImg())
.use(useEditPic(editOptions)) // 在预览上绑定编辑操作
// 控制操作栏的操作项
let arr = [];
// 遍历可以使用的所有操作项
imgViewer.traverseOperateFn((fn,key)=>{
    arr.push(key);
})
// 自定义绑定选中的操作项 operateMap
imgViewer.use(useOperateCont({operateMap:arr}));

```

#### ES6 import：

- 安装

  `npm install imgview-js`

- 使用

  ```js
  import ImgViewer, { useScale, useDrag, useDownloadImg, useOperateCont, useEditPic } from 'imgview-js';
  
  const container = document.getElementById('imgcont');
  const target = document.getElementById('img');
  const imgViewer = new ImgViewer({container,target});
  const editOptions = {
      imgUrl: target.src, // 图片地址
      width: 900, // canvas展示的宽高
      height: 600, // canvas展示的宽高
      // 编辑时操作的选项
      operateArray：['lastPic','drag','rect','circle','text','arrow','mosaic','revocation','downloadPic'],
      // 控制显示操作项选项
      showOperateSel: ['rect','circle','text','arrow'],
  }
  imgViewer
      .use(useScale())
      .use(useDrag())
      .use(useDownloadImg())
  	.use(useEditPic(editOptions)) // 在预览上绑定编辑操作
      .use(useOperateCont());
  
  
  ```




### ImgViewer 图片查看器
ImgViewer是图片查看器的一个类，接受配置项，进行各项配置操作；

`const imgViewer = new ImgViewer(options);`


#### 1、配置项options

| Field         | Type            | default | Description                                   |
| ------------- | --------------- | ------- | --------------------------------------------- |
| `container`   | `HtmlElement`   | -       | 图片的父级容器type为Element                   |
| `target`      | ``HtmlElement`` | -       | 被操作的图片 type为Element                    |
| `rate?`       | `number`        | 100     | 被放大或缩小的倍数，默认100相当于scale属性的1 |
| `delta?`      | `number`        | 20      | 每次放大或缩小的步调                          |
| `maxScale?`   | `number`        | 500     | 图片能够放大的最大的倍数                      |
| `minScale?`   | `number`        | 40      | 图片能够缩小的最小的倍数                      |
| `rotate?`     | `number`        | 0       | 图片当前的旋转的角度，默认的单位为deg         |
| `rotateStep?` | `number`        | 90      | 图片旋转的步调，默认的单位为deg               |

#### 2、实例方法

##### **scaleOperte**缩放方法

`this.scaleOperte(type) `  

type可选值：

|    Type     | Description                                           |
| :---------: | ----------------------------------------------------- |
|   `'add'`   | 进行放大操作，根据`delta`的值作为步调进行增大放大倍数 |
|  `'minus'`  | 进行缩小操作，根据`delta`的值作为步调进行减小放大倍数 |
| `'recover'` | 恢复原来的大小                                        |

##### **rotateOperte**旋转方法

`this.rotateOperte(type)`

type可选值：

|   Type    | Description                                                  |
| :-------: | ------------------------------------------------------------ |
| `'left'`  | 操作图片向左旋转，旋转步调为配置值`rotateStep`得大小，默认的单位deg |
| `'right'` | 操作图片向右旋转                                             |

##### **traverseOperateFn**遍历操作栏的所有方法

`this.traverseOperateFn(callback)`

参数：

|    Field     | Type       | Description                                                  |
| :----------: | ---------- | ------------------------------------------------------------ |
| `'callback'` | `Function` | 回调函数，实例方法调用时会传入回调fn,key作为参数；fn是操作栏的执行方法，key是操作栏的绑定映射 |

##### **getOperateFn**获取操作栏的执行方法

`this.getOperateFn(key)`

参数：

|  Field  | Type     | Description           |
| :-----: | -------- | --------------------- |
| `'key'` | `string` | key是操作栏的绑定映射 |

##### **addOperateFn**为操作栏添加方法

`this.addOperateFn(key,fn)`

参数：

|  Field  | Type       | Description           |
| :-----: | ---------- | --------------------- |
| `'key'` | `string`   | key是操作栏的绑定映射 |
| `'fn'`  | `Function` | fn是操作栏的执行方法  |

##### **deleteOperateFn**删除操作栏的方法

`this.rotateOperte(key)`

参数：

|  Field  | Type     | Description           |
| :-----: | -------- | --------------------- |
| `'key'` | `string` | key是操作栏的绑定映射 |

修改操作栏的方法需要在绑定操作栏之前进行（即使用useOperateCont之前）

#### 3、use插件使用

`this.use(plugin)`

插件plugin声明格式：

```js
function plugin(options) //插件也可以配置参数
	return (imgviewer){ // 传入图片查看器的实例
		console.log(imgviewer);
	}
}
```

插件使用：

```js
const imgViewer = new ImgViewer({container,target});
imgViewer.use(plugin(options))
```

####  4、imgViewer内置插件

 img-viewer内置了一些插件，可以针对需求进行插拔式使用；

##### useScale

`imgViewer.use(useScale())`

给图片查看器绑定缩放方法，插件使用后，可以对图片滑动鼠标滚轮进行对应的放大或者缩小操作

##### useDrag

`imgViewer.use(useDrag())`

给图片查看器绑定拖拽方法，插件使用后，可以对图片进行拖拽的操作

##### useDownloadImg

`imgViewer.use(useDownloadImg())`

给图片查看器绑定下载的方法，插件使用后，可以在操作栏操作对图片进行下载，会在操作栏增加一个key为`'downloadPic'`的操作项,所以这个插件需要操作栏配合，并且需要在绑定操作栏之前进行绑定

##### useEditPic

`imgViewer.use(useDownloadImg(options))`

给图片查看器绑定编辑的方法，会在弹出层上对图片进行编辑；弹出层是插入在body下面的，铺满整个窗口；

options参数`object`：

|      Field       | Type         | Description                                                  |
| :--------------: | ------------ | ------------------------------------------------------------ |
|     `imgUrl`     | `string`     | 图片的路径                                                   |
|     `width`      | `number`     | canvas显示宽度                                               |
|     `height`     | `number`     | canvas显示高度                                               |
|  `operateArray`  | `array<key>` | 为绑定操作栏的key组成的集合，其所有值：`'lastPic'`,`'drag'`,`'rect'`,`'circle'`,<br />`'text'`,`'arrow'`,`'mosaic'`,`'revocation'`,`'downloadPic'` |
| `showOperateSel` | `array<key>` | 目前只有这些操作key支持样式设置`['rect','circle','text','arrow']` |

**key值说明：**lastPic：退出编辑，drag：拖拽，rect：画框，circle：画（椭）圆，text：文本，arrow：箭头，mosaic：马赛克，revocation：撤回编辑，downloadPic：下载图片。

##### useOperateCont

`imgViewer.use(useOperateCont(options))`

options参数`object`：不传时默认全部操作项

|    Field     | Type         | Description                                                  |
| :----------: | ------------ | ------------------------------------------------------------ |
| `operateMap` | `array<key>` | 为绑定操作栏的key组成的集合，可以对操作栏进行筛选和排序；数组中的key的位置会映射到操作栏的操作项 |

imgViewer实例默认装配上如下操作项：`['scaleAdd','scaleMinus','scaleRecover','rotateLeft','rotateRight']`分别是放大，缩小，恢复，左旋，右旋；可通过上面实例方法进行删减或者进行排序；

给图片查看器绑定操作栏的方法，插件使用后，可以在图片的下方出现功能操作栏，所以如果有其他的操作功能则需要在绑定操作栏之前进行绑定。

**当然，如果这个操作栏的样式不符合你的需求或者压根不需要，那么你可以不用这个`useOperateCont`插件。自定义操作栏只需要你按照要求自己写一个插件即可，因为你可以根据实例方法`traverseOperateFn`遍历出所有可以使用的操作方法，然后根据需要调用即可；**



### ImgEditer 图片编辑器
ImgEditer是一个使用canvas对图片进行编辑的方法，该方法返回一个`promise`对象，对象传出编辑器实列可进行更多的自定义操作，这个实例实际就是`ImgViewer`类的实例，所以你可以在实例上取得编辑器的外层容器（插入到body上）`container`和canvas元素`target`以及实例方法。图片编辑时不建议开启缩放功能。

方法接受配置项options：

|      Field       | Type         | Description                                                  |
| :--------------: | ------------ | ------------------------------------------------------------ |
|     `imgUrl`     | `string`     | 图片的路径                                                   |
|     `width`      | `number`     | canvas显示宽度                                               |
|     `height`     | `number`     | canvas显示高度                                               |
| `'operateArray'` | `array<key>` | 为绑定操作栏的key组成的集合，其所有值：`'lastPic'`,`'drag'`,`'rect'`,`'circle'`, `'text'`,`'arrow'`,`'mosaic'`,`'revocation'`,`'downloadPic'` |
| `showOperateSel` | `array<key>` | 目前只有这些操作key支持样式设置`['rect','circle','text','arrow']` |

**key值说明：**lastPic：退出编辑，drag：拖拽，rect：画框，circle：画（椭）圆，text：文本，arrow：箭头，mosaic：马赛克，revocation：撤回编辑，downloadPic：下载图片。operateArray 不填写该项可以不显示操作栏。

调用即可`ImgEditer(options)`返回编辑器实例;

example:http://81.70.151.250:9090/imgviewer/index-edit.html 该例子使用自定义操作栏

单独使用时：

##### iife方式：

​	下载这个index.js放到你的项目中使用script标签引入:http://81.70.151.250:9090/imgviewer/index.js

```js
//script引入 会导出ImgViewer类
<script src="index.js"></script>

const ImgEditer = imgviewer.ImgEditer;
const target = document.getElementById('img');
const editOptions = {
    imgUrl: target.src, // 图片url地址就行
    width: 900, 
    height: 600, 
    // 操作栏操作选项 按数组顺序显示 不传就不显示操作栏
    operateArray: ['lastPic','drag','rect','circle','text','arrow','mosaic','revocation','downloadPic'],
    // 控制显示操作项选项
    showOperateSel: ['rect','circle','text','arrow'],
}
ImgEditer(editOptions).then(instance => {
    let container = instance.container;
    let canvas = instance.target;
    // let quit = instance.getOperateFn('lastPic');
    // quit(); // 退出编辑
});
```

##### ES6 import：

- 安装

  `npm install imgview-js`

- 使用

  ```js
  // 引入
  import { ImgEditer } from 'imgview-js';
  
  const target = document.getElementById('img');
  const editOptions = {
      imgUrl: target.src, // 图片url地址就行
      width: 900, 
      height: 600, 
      // 操作栏操作项 按数组顺序显示 不传就不显示操作栏
      operateArray: ['lastPic','drag','rect','circle','text','arrow','mosaic','revocation','downloadPic'],
      // 控制显示操作项选项
      showOperateSel: ['rect','circle','text','arrow'],
  }
  ImgEditer(editOptions).then(instance => {
      let container = instance.container;
      let canvas = instance.target;
      // let quit = instance.getOperateFn('lastPic');
      // quit(); // 退出编辑
  });
  
  
  ```



### 更新历史

| 版本号 | 更新内容                                                | index.js                                                     |
| ------ | ------------------------------------------------------- | ------------------------------------------------------------ |
| 1.0.0  | 图片的预览，放大，缩小，拖拽，旋转，复位，下载          | [index_v1.0.0.js](http://81.70.151.250:9090/imgviewer/index_v1.0.0.js) |
| 1.1.0  | 图片的编辑，画框，画圆，文本，箭头，马赛克，撤回，下载  | [index_v1.1.0.js](http://81.70.151.250:9090/imgviewer/index_v1.1.0.js) |
| 1.2.0  | 给部分操作项增加颜色和大小的配置选项，修复bug，完善文档 | [index_v1.2.0.js](http://81.70.151.250:9090/imgviewer/index_v1.2.0.js) |
| dev    | 优化，文档完善                                          | [index.js](https://gitee.com/TaBaBa/img-viewer/blob/develop/example/index.js) |

npm文档更新的稍慢，最新的请查看[gitee](https://gitee.com/TaBaBa/img-viewer)