目录
项目中需要对图片进行缩放,预览操作,看到ngx-lightbox,由于angular版本低,图片无法缩放。
又看到viewerjs,于是使用npm安装ngx-viewerjs,也无法正常使用,
最后用操作dom的形式使用viewerjs。
一、 下载viewerjs
使用npm 方式安装
npm install viewerjs@1.2.0
二、引入css样式
在styles.css 文件中引入 下面代码。
@import '~viewerjs/dist/viewer.css';
三、代码
html
<img id="img" [src]="url" (click)="open()">
ts
open(): void {
const element = <Element>document.getElementById('img');
setInterval(()=>{
new Viewer(element, {
inline: false,
});
},100)
}
四、问题
1.angular6其他版本时,请在下面网址寻找对应版本
https://github.com/fengyuanchen/viewerjs
2.无需在 app.module.ts 引入
3.
const aaa = <HTMLElement>document.getElementById('viewerjs')
//或者
const aaa = document.getElementById('viewerjs') as HTMLElement
借鉴此文章
https://www.jianshu.com/p/2abc136e96ce
五、参考
https://www.jianshu.com/p/2abc136e96ce
https://blog.csdn.net/qq_40020447/article/details/118419780
https://blog.csdn.net/qq_34749609/article/details/88353533
https://github.com/fengyuanchen/viewerjs
如有雷同,纯属巧合。