imgview-js v1.2.1

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

2、实例方法

scaleOperte缩放方法

this.scaleOperte(type)

type可选值：

rotateOperte旋转方法

this.rotateOperte(type)

type可选值：

traverseOperateFn遍历操作栏的所有方法

this.traverseOperateFn(callback)

参数：

getOperateFn获取操作栏的执行方法

this.getOperateFn(key)

参数：

addOperateFn为操作栏添加方法

this.addOperateFn(key,fn)

参数：

deleteOperateFn删除操作栏的方法

this.rotateOperte(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：

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

useOperateCont

imgViewer.use(useOperateCont(options))

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

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

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

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

ImgEditer 图片编辑器

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

方法接受配置项options：

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