imgviewer

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

使用方式

使用ES6 import或者umd的方式

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

script标签引入的方式：

下载这个index.js放到你的项目中使用script标签引入:https://unpkg.com/imgview-js

//script引入 会导出ImgViewer类
<script src="https://unpkg.com/imgview-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

• 使用

  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声明格式：

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

插件使用：

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','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 该例子使用自定义操作栏

单独使用时：

script标签引入方式：

​ 下载这个index.js放到你的项目中使用script标签引入:https://unpkg.com/imgview-js

//script引入 会导出ImgViewer类
<script src="https://unpkg.com/imgview-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

• 使用

  // 引入
  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(); // 退出编辑
  });