imageViewer
一款基于 Html5、Javascript、Canvas 的图片编辑器
一、通过 Node 引用
npm i alvin-imageviewer
在 VUE 的 SPA 中的使用示例:
LoadImage
二、通过 script 脚本引入
三、ImageViewer 的 APIs
基本功能
LoadImageEx(imgData)
:从本地 load 图片;ShowVideo()
:打开摄像头,从摄像头截取图片并 load 到编辑器;RemoveAllImages()
:删除所有图片;RemoveAllSelectedImages()
:删除当前选中的图片;ShowImage(index)
:显示索引为 index 的图片;ChangePage(cmd)
: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 支持手势滑动切换,也支持鼠标滑动切换;