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)

Answer 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

Answer 2

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.