角度图像更改灰度（滑块）答案

【问题标题】：Image change greyscale (Slider) in angular角度图像更改灰度（滑块）
【发布时间】：2021-05-07 01:07:45
【问题描述】：

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

这是我的html代码

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

这是我的同款

public set(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
at HTMLInputElement.oninput ((index):13)

【问题讨论】：

set 是 javascript 中的保留字。你不能用它作为函数名..

标签： javascript angular typescript angular8

【解决方案1】：

为什么不使用“Angular 方式”？

你声明了两个变量

  sepia=0;
  grayScale=0;

只需使用[(ngModel)] 和[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">

见simple stackblitz

【讨论】：

非常感谢您的努力，但是当我单击 stackblitz 时，我无法看到输出，请您帮我解决一下
对我来说链接有效，顺便说一句，您只需创建一个组件，在 .ts 中编写两个变量 - 在 export class AppComponent { ...here..} 之后并在 .html 中复制并粘贴 html 代码。 A [(ngModel)] 使“变量”获取滑块的值。当您使用 [style.filter]="...." 时，引号下的表达式必须返回一个字符串，例如"grayscale(.3) sepia(0)" - 唯一的办法是用引号和括号引起注意-。认为 Angular 将 .ts 中的变量与 .html 相关联，当变量更改时，.html 会用新值重新绘制。
非常感谢你能帮我解决这个问题吗stackoverflow.com/questions/65998334/…
@Elliseo 我在我的页面中应用了相同的代码图像没有改变那里
这是我的 ts sepia=0;灰度=0；色调旋转=0；饱和=1;

【解决方案2】：

在上面的示例中，使用了oninput 属性，即global event attribute。这通常与 vanilla js 一起使用，但在 Angular 中，还有另一种在 TypeScript 代码中调用函数的方法：事件绑定。

在 Angular 中，不使用全局事件属性，而是使用 Angular 的事件绑定功能将它们绑定到 DOM Event。

后面的oninput="set(this, 'sepia');"应该改成(input)="set(..params..)"的格式。

但是，一些调整似乎是必要的。例如，this 作为输入绑定中的参数将不起作用，很可能$event 将包含必要的信息。另一方面，不建议使用document.getElementById 访问本机DOM 元素，我建议使用ViewChild 代替它。

【讨论】：