角度图像更改灰度(滑块) [英] Image change greyscale (Slider) in angular

问题描述

我正在尝试使用滑块控件将图像更改为灰度和棕褐色

这是我的html代码

 
<input id="sepia";类型=范围"oninput="set(this, 'sepia');"值=0"步长=0.1"min=0"max＝1">棕褐色<span id=Amount_sepia">(0)</span><br/><输入id=灰度"类型=范围"oninput="set(this, '灰度');"值=0"步长=0.1"min=0"max＝1">灰度<span id=Amount_grayscale">(0)</span><br/>
<img class="img-fluid";id="img_prev";src="{{actualImage}}";*ngIf="!this.showCropper";/><image-cropper id="img_prev";类=图像类"*ngIf=this.showCropper"[自动裁剪]=假"[imageChangedEvent]=imageChangedEvent"[maintainAspectRatio]=真"；[纵横比]=4/3"；[resizeToWidth]=256"；[cropperMinWidth]=128"[onlyScaleDown]=真"格式=png"；(imageCropped)="imageCropped($event)";(imageLoaded)="imageLoaded()";(cropperReady)="cropperReady()";(loadImageFailed)="loadImageFailed()";样式=最大高度:500像素"></image-cropper>

这是我的 ts

公共集合(e,f){document.getElementById('img_prev').style["filter"] = f+"("+e.value+")";document.getElementById('Amount_'+f).innerHTML="("+e.value+")";}

我收到错误

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

解决方案

为什么不使用Angular 方式"?

你声明了两个变量

 sepia=0;灰度=0；

并且只需使用 [(ngModel)] 和 [style.filter]

棕褐色<span id="Amount_sepia">({{sepia}})</span><br/><输入id=灰度"；类型=范围"[(ngModel)]=灰度"步长=0.1"min=0"max＝1">灰度<span id="Amount_grayscale">({{grayScale}})</span><br/><img [style.filter]="'grayscale('+grayScale+') sepia('+sepia+')'";src=https://picsum.photos/300/300?random=1">

参见简单的stackblitz

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)

解决方案

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

这篇关于角度图像更改灰度(滑块)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！