imgview-js

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