I am wondering if it is possible to edit or add additional styles when my image is viewed using the "ionic-img-viewer" npm package. Alternatively, how can I apply the same styles as those on my original image tag?
For example, here is my img tag with some filter codes:
<img src="{{url}}" style="filter: brightness(130%) contrast(130%) grayscale(100%);" #imageToView>
Here are the codes for using the ionic-img-viewer npm package:
<button ion-button full clear icon-only color="" (click)="viewImg(imageToView)">
<ion-icon name="expand"></ion-icon>
</button>
Typescript code snippet:
import { ImageViewerController } from "ionic-img-viewer";
...
constructor(public navCtrl: NavController, ..., public imageViewerCtrl: ImageViewerController)
...
viewImg(imageToView) {
const viewer = this.imageViewerCtrl.create(imageToView);
viewer.present();
}
When viewing the image with ionic-img-viewer, it displays the original image without any filters. Is there a way to apply my custom styles to the viewed image?
Please note that the ionic-img-viewer npm package can be found at [ https://www.npmjs.com/package/ionic-img-viewer ]