web-photo-filter tag is not rendering on iOS 15 device Ionic 6

[aliexalter]

Platform iOS
Ionic 6 Capacitor Angular 11

After running ionic cap sync. When app is run on Xcode > Device it does not show web-photo-filter tag. Only show img tag.

photoToFilter.thumbnail is base64 image stored in local storage.

PROBLEM: E/Capacitor: Unable to open asset URL: http://localhost/webphotofilter.js

app/index.html
<script async src="webphotofilter.js"></script>

angular.json

`{
                "glob": "webphotofilter.js",
                "input": "node_modules/web-photo-filter/dist",
                "output": "./"
              },
              {
                "glob": "webphotofilter/*",
                "input": "node_modules/web-photo-filter/dist",
                "output": "./"
              }`

app/main.ts

`import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';

import { AppModule } from './app/app.module';
import { environment } from './environments/environment';

import { defineCustomElements } from "@ionic/pwa-elements/loader";

if (environment.production) {
  enableProdMode();
}

platformBrowserDynamic().bootstrapModule(AppModule)
  .catch(err => console.log(err));

//Call the elemnt loader after the platform has been bootstrapped
defineCustomElements(window);`

imagefiltering.module.ts

`import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule } from '@angular/forms';

import { IonicModule } from '@ionic/angular';

import { ImagefilteringPageRoutingModule } from './imagefiltering-routing.module';

import { ImagefilteringPage } from './imagefiltering.page';
import { SwiperModule } from 'swiper/angular';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    SwiperModule,
    ImagefilteringPageRoutingModule
  ],
  declarations: [ImagefilteringPage],
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class ImagefilteringPageModule {}
`

imagefiltering.page.ts

`import { Component, OnInit } from '@angular/core';
import { Storage } from '@capacitor/storage';

@Component({
  selector: 'app-imagefiltering',
  templateUrl: './imagefiltering.page.html',
  styleUrls: ['./imagefiltering.page.scss'],
})
export class ImagefilteringPage implements OnInit {

  product:any;
  photoTofilter:any = {
    thumbnail: ""
  };

  constructor() { }

  ngOnInit() {
  }

  ionViewDidEnter(){
    Storage.get({key: 'product'}).then((result:any)=>{
      if(result && result.value)
      {
         this.product = JSON.parse(result.value);
      }
    });
    Storage.get({key: 'editImage'}).then((result:any)=>{
      if(result && result.value)
      {
         this.photoTofilter = JSON.parse(result.value);
      }
    });
  }

}
`

imagefiltering.page.html

`<ion-header>
  <ion-toolbar mode="ios">
    <ion-buttons slot="start">
      <ion-back-button text="" icon="chevron-back" defaultHref="/selection/device" color="medium"></ion-back-button>
    </ion-buttons>
    <ion-title>Apply Filter</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  <ion-grid>
    <ion-row>
      <ion-col>
        <img [src]="photoTofilter.thumbnail"/>
        <web-photo-filter [src]="photoTofilter.thumbnail" filter="sepia"></web-photo-filter>
      </ion-col>
    </ion-row>
  </ion-grid>
</ion-content>

<ion-footer>
  <swiper [spaceBetween]="10" [slidesPerView]="'auto'" [centeredSlides]="true" [loop]="true">
    <ng-template swiperSlide>
      <img [src]="photoTofilter.thumbnail"/>
    </ng-template>
    <ng-template swiperSlide>
      <web-photo-filter [src]="photoTofilter.thumbnail" filter="sepia"></web-photo-filter>
    </ng-template>
  </swiper>
</ion-footer>
`

[peterpeterparker]

Hi, thanks for the issue. I don't spend much time on this library anymore nor do I have the time for. Therefore cannot help sorry. I fear you will not get much support but for sure the issue can remain open.

[aliexalter]

The problem is this

E/Capacitor: Unable to open asset URL: http://localhost/webphotofilter.js

Angular.json is not producing this file on compilation.

[Zaydovaah]

Hi @aliexalter
I know this was long ago but were you able to fix this issue in the end ? I'm facing it right now using Angular 15 and Ionic 6

[aliexalter]

Yes by using Instagram css filters. I use css filters to only display filtered image. Once user finalise the filter using javascript I apply the filter again to base64 original image.

[Zaydovaah]

Yes by using Instagram css filters. I use css filters to only display filtered image. Once user finalise the filter using javascript I apply the filter again to base64 original image.

Thank you! I'm going to try that out