一款基于 Html5、Canvas 的图片编辑器
npm install alvin-imageviewerjs
npm i alvin-imageviewer
`
在 VUE 的 SPA 中的使用示例:
`html
`
二、通过 script 脚本引入
`html
`
三、ImageViewer 的 APIs
$3
1. LoadImageEx(imgData):从本地 load 图片;
2. ShowVideo():打开摄像头,从摄像头截取图片并 load 到编辑器;
3. RemoveAllImages():删除所有图片;
4. RemoveAllSelectedImages():删除当前选中的图片;
5. ShowImage(index):显示索引为 index 的图片;
6. ChangePage(cmd):
`js
switch(cmd){
case "f": 显示第一张图片;
case "p": 显示上一张图片;
case "n": 显示下一张图片;
case "l": 显示最后一张图片;
default: 不变
}
`
7. GetCurentIndex():获取当前图片的索引;
8. GetCount():获取 ImageViewer 中的图片总数;
9. GetImage(index,isOri):获取索引为 index 的图片,当 isOri 为 true 时获取原图,isOri 为 false 时获取缩略图;
10. SaveAsBMP(filename,index):将索引为 index 的图片保存为 BMP 格式;
11. SaveAsJPEG(filename,index):将索引为 index 的图片保存为 JPEG 格式;
12. SaveAsTIFF(filename,index):将索引为 index 的图片保存为 TIFF 格式;
13. SaveAsPNG(filename,index):将索引为 index 的图片保存为 PNG 格式;
14. SaveAsPDF(filename,index):将索引为 index 的图片保存为 PDF 格式;
15. GetBackgroundColor()/SetBackgroundColor():获取/设置 ImageViewer 的背景色;
$3
1. ShowImageEditor():进入图片编辑模式;
2. CloseImageEditor():退出图片编辑模式;
3. RotateLeft():向左旋转 90°;
4. RotateRight():向右旋转 90°;
5. Rotate(index,angle):将索引等于 index 的图片旋转 angle 度,目前 angle 只能传入 90 的倍数;
6. Mirror():水平镜像翻转;
7. Flip():垂直镜像翻转;
8. Crop():裁切当前框选的图片区域;
9. Undo():回退到上一步;
10. Redo():前进到下一步(执行过 Undo 之后,Redo 才有效);
11. Save():保存当前图片,并更新原图片;
12. SetCropBackgroundColor():设置裁切框的背景色;
13. SetCropBorderColor():设置裁切框的边框色;
$3
1. AdaptiveLayout():自适应屏幕大小;
2. onNumChange():响应当前显示图片 index 改变的钩子函数;
$3
1. GetThumbnaiBackgroundColor()/SetThumbnailBackgroundColor():获取/设置 thumbnail 的背景色;
2. GetThumbnailImageMargin()/SetThumbnailImageMargin(val)`:获取/设置 thumbnail 中图片的外边距,默认为 10px;