alvin-imageviewer
v2.2.0
Published
一款基于 Html5、Canvas 的图片编辑器
Downloads
8
Readme
imageViewer
一款基于 Html5、Javascript、Canvas 的图片编辑器
一、通过 Node 引用
npm i alvin-imageviewer在 VUE 的 SPA 中的使用示例：
<template>
<div id="main">
<a href="javascript:void(0)" @click="fuc_LoadImage">LoadImage</a>
<div id="imageViewer"></div>
</div>
</template>
<script>
import createImageViewer from "alvin-imageviewer";
export default {
name: "ImageViewer",
data() {
return {
imageViewer: "",
};
},
mounted() {
var cfg = {
ContainerId: "imageViewer",
Width: "1000px",
Height: "1000px",
};
this.imageViewer = createImageViewer(cfg);
},
methods: {
fuc_LoadImage() {
if (!this.imageViewer) {
return false;
}
this.imageViewer.LoadImageEx();
},
},
};
</script>二、通过 script 脚本引入
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="css/cssResetH5.css" />
<link rel="stylesheet" type="text/css" href="css/mbc.css" />
<script type="text/javascript">
var Alvin = Alvin || {};
</script>
</head>
<body>
<div id="imageViewer"></div>
</body>
<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>
<script type="text/javascript" src="mbc.js?v=20200227"></script>
<script type="text/javascript" src="js/opration.js?v=20190522"></script>
</html>三、ImageViewer 的 APIs
基本功能
LoadImageEx(imgData)：从本地 load 图片；ShowVideo()：打开摄像头，从摄像头截取图片并 load 到编辑器；RemoveAllImages()：删除所有图片；RemoveAllSelectedImages()：删除当前选中的图片；ShowImage(index)：显示索引为 index 的图片；ChangePage(cmd)：switch(cmd){ case "f": 显示第一张图片; case "p": 显示上一张图片; case "n": 显示下一张图片; case "l": 显示最后一张图片; default: 不变 }GetCurentIndex()：获取当前图片的索引；GetCount()：获取 ImageViewer 中的图片总数；GetImage(index,isOri)：获取索引为 index 的图片，当 isOri 为 true 时获取原图，isOri 为 false 时获取缩略图；SaveAsBMP(filename,index)：将索引为 index 的图片保存为 BMP 格式；SaveAsJPEG(filename,index)：将索引为 index 的图片保存为 JPEG 格式；SaveAsTIFF(filename,index)：将索引为 index 的图片保存为 TIFF 格式；SaveAsPNG(filename,index)：将索引为 index 的图片保存为 PNG 格式；SaveAsPDF(filename,index)：将索引为 index 的图片保存为 PDF 格式；GetBackgroundColor()/SetBackgroundColor()：获取/设置 ImageViewer 的背景色；
编辑功能
ShowImageEditor()：进入图片编辑模式；CloseImageEditor()：退出图片编辑模式；RotateLeft()：向左旋转 90°；RotateRight()：向右旋转 90°；Rotate(index,angle)：将索引等于 index 的图片旋转 angle 度，目前 angle 只能传入 90 的倍数；Mirror()：水平镜像翻转；Flip()：垂直镜像翻转；Crop()：裁切当前框选的图片区域；Undo()：回退到上一步；Redo()：前进到下一步（执行过 Undo 之后，Redo 才有效）；Save()：保存当前图片，并更新原图片；SetCropBackgroundColor()：设置裁切框的背景色；SetCropBorderColor()：设置裁切框的边框色；
其他功能
AdaptiveLayout()：自适应屏幕大小；onNumChange()：响应当前显示图片 index 改变的钩子函数；
Thumbnail 的 Apis
GetThumbnaiBackgroundColor()/SetThumbnailBackgroundColor()：获取/设置 thumbnail 的背景色；GetThumbnailImageMargin()/SetThumbnailImageMargin(val)：获取/设置 thumbnail 中图片的外边距，默认为 10px;
附加功能
- 在进入编辑模式之前，imageViewer 支持手势滑动切换，也支持鼠标滑动切换；