Hi there,
I need to implement angular-cropper with the filtered image result.
So to be able to crop before the image was filtered and after the image was filtered.
How can I do it?

I watched this video.
And I see there that there is a crop option
That is what I want to accomplish.

Hi,

I implemented the solution from https://devdactic.com/ionic-photo-filters-instagram/

Filters are being applied fine to the top image, and the filter thumbnails initially work. But sometimes when I click on the filter thumbnails the image of other filters or even the one I clicked disappears - see image below:

I also see this on Chrome Dev Tools when I click on a filter:

web-photo-filter.entry.js:277 WARNING: Too many active WebGL contexts. Oldest context will be lost.

Ionic:

   Ionic CLI                     : 6.18.1 (/usr/local/lib/node_modules/@ionic/cli)
   Ionic Framework               : @ionic/angular 6.0.3
   @angular-devkit/build-angular : 13.0.4
   @angular-devkit/schematics    : 13.0.4
   @angular/cli                  : 13.0.4
   @ionic/angular-toolkit        : 5.0.3

Capacitor:

   Capacitor CLI      : 3.4.0
   @capacitor/android : 3.4.0
   @capacitor/core    : 3.4.0
   @capacitor/ios     : not installed

Utility:

   cordova-res : not installed globally
   native-run  : 1.5.0

System:

   NodeJS : v14.15.1 (/usr/local/bin/node)
   npm    : 8.3.1
   OS     : macOS Monterey

Any idea of what could be causing this and how to fix?

Thanks in advance and thanks for providing us with such useful library!
Caio

Hi there,
The canvas element is not visible in the application
What can be the problem ?

I tried it with 1.1.1 and 2.1.1

see the demo video: https://www.youtube.com/watch?v=jfPTBsDSZW0

here is the code:

TS file:

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams, ViewController } from 'ionic-angular';

@IonicPage()
@Component({
  selector: 'page-edit-image',
  templateUrl: 'edit-image.html',
})
export class EditImagePage {

  selectedFilter = null;
  image: any;
  level = 1;
  result: HTMLElement;

  constructor(
    public navCtrl: NavController, 
    public navParams: NavParams,
    public viewCtrl: ViewController) {

      //this.image = navParams.data.image;
      this.image = 'assets/imgs/view.jpg';
      this.filter(null, 1);
  }

  ionViewDidLoad() {
    console.log('ionViewDidLoad EditImagePage');
  }

  dismiss(){
    this.viewCtrl.dismiss();
  }

  filter(selected, level?){
    this.selectedFilter = selected,
    this.level = level ? level : 1;
  }

  imageLoaded(e){
    console.log('imageLoaded: ', e);
    this.result = e.detail.result;
  }

  saveImage() {
    let canvas = this.result as HTMLCanvasElement;
    let base64 = canvas.toDataURL('image/jpeg', 1.0);
  }

}

HTML file:

<ion-header>
  <ion-navbar>
    <ion-buttons left>
      <button ion-button icon-only (click)="dismiss()">
        <ion-icon name="arrow-back"></ion-icon>
      </button>
    </ion-buttons>  
  
    <ion-title>Edit Image</ion-title>

    <ion-buttons right>
      <button ion-button icon-only (click)="filter(null, 1)">
        <ion-icon name="refresh"></ion-icon>
      </button>
    </ion-buttons>  

  </ion-navbar>
</ion-header>

<ion-content>
  <ion-row *ngIf="image">
    <ion-col>
      <button ion-button outline color="primary" (click)="filter('Sepia')">
        Sepia
      </button>
    </ion-col>
    <ion-col>
      <button ion-button outline color="primary" (click)="filter('Polaroid')">
        Polaroid
      </button>
    </ion-col>
    <ion-col>
      <button ion-button outline (click)="filter('greyscale')">
        Grey
      </button>
    </ion-col>
    <ion-col>
      <button ion-button outline (click)="filter('contrast')">
        Contrast
      </button>
    </ion-col>
    <ion-col>
      <button ion-button outline (click)="filter('brightness', 1.7)">
        Bright
      </button>
    </ion-col>
    <ion-col>
      <button ion-button outline (click)="filter('saturation')">
        Saturation
      </button>
    </ion-col>
    <ion-col>
      <button ion-button outline (click)="filter('hue', 120)">
        Hue
      </button>
    </ion-col>
  </ion-row>

  selectedFilter: {{selectedFilter}}
  <br>
  level: {{level}}
  
  <web-photo-filter 
    [class.only-original]="!selectedFilter" 
    [class.no-original]="selectedFilter" 
    [src]="image"
    [filter]="selectedFilter" 
    [level]="level" 
    keep="true" 
    (filterLoad)="imageLoaded($event)">
  </web-photo-filter>
 
</ion-content>
  

CSS file:

page-edit-image {
    canvas {
        width: 100%;
      }
    .no-original img.display-no-filter {
        display: none !important;
    }
    .only-original canvas {
        display: none !important;
    }
}

Hi there,
I am trying to do a filter on a large weight image and the filters are not showing and not working.

I take an image from the local device library that weight 8 MB and none of the filters show and work.

[x] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://stencil-worldwide.slack.com

I like how this component looks thus far, the only thing I am confused about is it's ability to combine multiple filters into one.

For example, currently, I am serving filters via CSS, which apply at load-time. One of my filters looks like this:

{name: 'Aden', class: 'aden', filter: 'contrast(0.9) brightness(1.2) saturate(0.85) hue-rotate(20deg)'},

I noticed that all of the examples that you provide, only allow you to filter based on one value (Hue, brightness, saturation, etc...). So I was curious what goes into creating custom filters, like the one above.

I checked out the web-photo-filter-type.tsx but I am not sure how to utilize this class to accomplish what I am trying to do, right now. Can you give any insight on the steps required to create a new filter?

Update to last Stencil v0.14.0

Couldn't find a repo for the website itself, so I'm submitting it here:

Hi,

I am having a problem with a scrollable div.
On the scrollable div I want to show buttons and in the button there is a web-photo-filter component.
But I can't see all the filters.
What can be the problem ?

I am working with IONIC 3
and web-photo-filter version: 1.1.1

This is my code:

HTML code:

<div class="page-slides">
    <div class="my-slide">
      <button ion-button clear (click)="filter('sepia')">
        <web-photo-filter [src]="image" filter="sepia"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('blue_monotone')">
        <web-photo-filter [src]="image" filter="blue_monotone"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('violent_tomato')">
        <web-photo-filter [src]="image" filter="violent_tomato"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('greyscale')">
        <web-photo-filter [src]="image" filter="greyscale"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('brightness', 1.2)">
        <web-photo-filter [src]="image" filter="brightness" level="1.2"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('saturation')">
        <web-photo-filter [src]="image" filter="saturation"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('contrast')">
        <web-photo-filter [src]="image" filter="contrast"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('hue', 120)">
        <web-photo-filter [src]="image" filter="hue" level="120"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('cookie')">
        <web-photo-filter [src]="image" filter="cookie"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('vintage')">
        <web-photo-filter [src]="image" filter="vintage"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('koda')">
        <web-photo-filter [src]="image" filter="koda"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('technicolor')">
        <web-photo-filter [src]="image" filter="technicolor"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('polaroid')">
        <web-photo-filter [src]="image" filter="polaroid"></web-photo-filter>
      </button>      
    </div>
    <div class="my-slide">
      <button ion-button clear (click)="filter('bgr')">
        <web-photo-filter [src]="image" filter="bgr"></web-photo-filter>
      </button>      
    </div>
  </div>

I am using ionic3 and i followed the process that u described,but where can i found the filtered image.As i want to display the filtered image
My ts will look like this
import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { Camera, CameraOptions } from '@ionic-native/camera';
import { ImagePicker } from '@ionic-native/image-picker';
import { Crop } from '@ionic-native/crop';
import 'web-photo-filter';

/**

• Generated class for the EditPage page.
• See https://ionicframework.com/docs/components/#navigation for more info on
• Ionic pages and navigation.
  */

@IonicPage()
@component({
selector: 'page-edit',
templateUrl: 'edit.html',
})
export class EditPage {
newPhoto:any;
photonew:any;
filter:string='null';
constructor(public navCtrl: NavController, public navParams: NavParams,
private camera:Camera,
private imagePicker:ImagePicker,
private crop: Crop) {
}

ionViewDidLoad() {
console.log('ionViewDidLoad EditPage');
}

pickPhoto(){
const options: CameraOptions = {
quality: 70,
destinationType: this.camera.DestinationType.DATA_URL,
encodingType: this.camera.EncodingType.JPEG,
mediaType: this.camera.MediaType.PICTURE,
saveToPhotoAlbum:true,
allowEdit:true
}
this.imagePicker.getPictures(options).then((results) => {
for (var i = 0; i < results.length; i++) {
console.log('Image URI: ' + results[i]);
}
this.newPhoto=results[0];
}, (err) => { });
}

cropPhoto(pic){
this.crop.crop(pic, {quality: 75})
.then(
newImage => {
console.log('new image path is: ' + newImage);
this.photonew=newImage;
},
error => console.error('Error cropping image', error)
);
}
effectOne(){
console.log(this.newPhoto);
console.log("one");
this.filter="sepia";
}effectTwo(){
console.log(this.newPhoto);
console.log("two");
this.filter="blue_monotone";
}effectThree(){
console.log(this.newPhoto);
console.log("three");
this.filter="violen_tomato";
}
}

My html file is

If u respond as soon as possible it will be helpful,thanks

The filters for version ^2.0.0 are not displayed in an Ionic 3 app. Is it supposed to be compatible?
Angular 5 and ionic-angular 3.9.2

Filters used as follows:
<web-photo-filter [src]='somebase64Image' (click)="applyFilter('')" [filter]='filterStringEgSepia' (filterLoad)="filterLoaded($event)"> </web-photo-filter>

Hey man. First, I really appreciate you taking the time to make this library. I am very interested in having image photo filter functionality of the type you describe and demonstrate on the home page for this library.

The problem is, I just can't get it to work! I've tried everything I can think of.

So I've created a very small test project that I'm hoping you could look at, and let me know what I'm doing wrong:
https://github.com/varunj166/web-photo-filter-testing

All it contains is the react WebPhotoFilter component (which doesn't seem to work), as well as the actual web-photo-filter web component (which was a last ditch effort to get something to show up on the page).

PLEASE take a moment and let me know what's wrong. I'm sure it's something simple.

Thanks!

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>
`

I can't seem to use it

WebPhotoFilter is undefined

I saw

Empty file

Is there any way to use an image from an https path if we are in control of where that image is stored? For example, if we have it stored on Azure Storage or on our own server?

I think why it is not allowed is because of CORS. If that is true, the error I get when I try to do this with web-photo-filter is usually solved by setting crossorigin on the img tag.

Is there a way to set the crossorigin attribute on the image element to possibly allow for using images from an https origin?

Has anyone found out any way to use an https image src?

Hi,
What is the way to install this component on an Ionic 3 project?

Thank you

Hi I followed Simon Grimm's guide for Ionic step by step on https://devdactic.com/ionic-photo-filters-instagram/

When I start the project I get the error http: // localhost: 8100 / webphotofilter.js ERR_ABORTED 404

From what I saw in the dist of the node_module there is no js file. How can I solve? Thank you very much!

Stencil advice to target ES2017