Image change greyscale (Slider) in angular

Question

I am trying to change image into Greyscale and Sepia using slider control

Here is my html code

       <div class="card-body">
        <input id="sepia" type="range" oninput="set(this, 'sepia');" value="0" step="0.1" min="0" max="1"> Sepia <span id="Amount_sepia">(0)</span><br/>
        <input id="grayscale" type="range" oninput="set(this, 'grayscale');" value="0" step="0.1" min="0" max="1"> Grayscale <span id="Amount_grayscale">(0)</span><br/>
      </div>

              <img class="img-fluid" id="img_prev" src="{{actualImage}}" *ngIf="!this.showCropper" />
                <image-cropper id="img_prev"  class="imageclass" *ngIf="this.showCropper" 
                        [autoCrop]="false"
                          [imageChangedEvent]="imageChangedEvent"
                           [maintainAspectRatio]="true"
                           [aspectRatio]="4 / 3"
                           [resizeToWidth]="256"
                           [cropperMinWidth]="128"
                            [onlyScaleDown]="true"
                           format="png"
                           (imageCropped)="imageCropped($event)"
                           (imageLoaded)="imageLoaded()"
                           (cropperReady)="cropperReady()"
                           (loadImageFailed)="loadImageFailed()" style="max-height:500px"> 
                </image-cropper>

Here is my ts for the same

public set(e,f){
    document.getElementById('img_prev').style["filter"] = f+"("+e.value+")";
    document.getElementById('Amount_'+f).innerHTML="("+e.value+")";
 }

I am getting error

(index):13 Uncaught ReferenceError: set is not defined
at HTMLInputElement.oninput ((index):13)

set is a reserved word in javascript. You can’t use it as a function name.. — MikeOne, Feb 02 '21 at 20:19

score 1 · Accepted Answer · answered Feb 02 '21 at 20:20

1

why not use an "Angular way"?

You declare two variables

  sepia=0;
  grayScale=0;

And simply use [(ngModel)] and [style.filter]

<input id="sepia" type="range" [(ngModel)]="sepia" 
    step="0.1" min="0" max="1"> Sepia
    <span id="Amount_sepia">({{sepia}})</span>
<br/>
<input id="grayscale" type="range" [(ngModel)]="grayScale" 
    step="0.1" min="0" max="1"> Grayscale
<span id="Amount_grayscale">({{grayScale}})</span>
<br/>
<img [style.filter]="'grayscale('+grayScale+') sepia('+sepia+')'" 
    src="https://picsum.photos/300/300?random=1">

See simple stackblitz

answered Feb 02 '21 at 20:20

Eliseo

50,109
4
29
67

thank you so much for the effort but when i click the stackblitz I was not able to see the output could you please help me on that – Mr.M Feb 03 '21 at 05:41
for me the links work, BTW you simple create a component, in .ts you write the two variables -after the `export class AppComponent { ...here..}` and in the .html copy and paste the html code. A [(ngModel)] makes that the "variable" get the value of the slider. When you use [style.filter]="....", the expresion under the quotes must return a string, e.g. `"grayscale(.3) sepia(0)"` -the only is get attention with the quotes and parenthesis-. Think that Angular relationate the variables in .ts with the .html, when a variable change, the .html is repainted with the new values. – Eliseo Feb 03 '21 at 08:44
Thank you so much Could you please help me on this question also https://stackoverflow.com/questions/65998334/zoom-in-zoom-out-angular-not-working-for-ngx-image-cropper – Mr.M Feb 03 '21 at 09:13
@Elliseo I have applied the same code in my page the image nothing changed there – Mr.M Feb 03 '21 at 19:00
this is my ts sepia=0; grayScale=0; hueRotate=0; saturate=1; – Mr.M Feb 03 '21 at 19:01

score 0 · Answer 2 · answered Feb 02 '21 at 20:20

In the above example oninput attribute is used which is a global event attribute. This is usually used with vanilla js but in Angular there is an other approach to call function in the TypeScript code: the event binding.

In Angular the global event attributes are not used, instead of them we bind to the DOM Event with the event binding feature of Angular.

It follows oninput="set(this, 'sepia');" should be changed to a format with (input)="set(..params..)".

However, some adaptation seems to be necessary. For example the this as parameter in input binding won't work, most probably the $event will contain the necessary information. On the other hand it is not recommended to access native DOM Elements using document.getElementById, I recommend to use ViewChild instead of it.

Image change greyscale (Slider) in angular

2 Answers2

Linked